jQuery / trigger onload

Question

I am fairly new to jQuery. I'm trying to use a solution called mark.js

$(function () {
    var mark = function () {
        var inputstring = "/[^a-zA-Z0-9-,-.-]/g";
        // Create regexvar flags = inputstring.replace(/.*\/([gimy]*)$/, '$1');
        var pattern = inputstring.replace(new RegExp('^/(.*?)/' + flags + '$'), '$1');
        var regex = new RegExp(pattern, flags);
        // Determine selected optionsvar options = {};

        $("input[name='opt[]']").each(function () {
            options[$(this).val()] = $(this).is(":checked");
        });

        // Mark the regex inside the context
        $(".context").unmark({
            done: function () {
                $(".context").markRegExp(regex, options);
            }
        });
    };

    // Trigger mark action on button click
    $("button[name='mark']").on("click", mark);
});

Basically the code executes when I click the button called 'mark'. What I would like, and I know it sounds simple is for the code to execute on page load.

Is this possible?

`$("button[name='mark']").on("click", mark).trigger('click');` — Rory McCrossan, Jul 26 '17 at 15:31
@RoryMcCrossan wouldn't that be an answer, rather than a comment? — Taplar, Jul 26 '17 at 15:34

Taplar · Accepted Answer · 2017-07-27T16:43:02.357

// Trigger mark action on button click
$("button[name='mark']").on("click", mark);
});

mark(); //will execute on page load

So the first part is creating a binding against the found element what will execute when any of them are clicked. Your question asked to also perform this on page load.

mark(); will immediately invoke it when it is encountered, which if you have it outside of any function, or in a function that is invoked on page load, it will execute on page load.

Others have suggested using .trigger('click') on the end of the binding to reach the same result, which is correct as well. However, this incurs more overhead. When you use trigger(event) you are making jQuery create a new Event object which will then be processed by the element(s) triggered.

Unless you have a reason to do this, this is usually unnecessary for the case you brought up. You simply want the function to execute on page load. There is no reason to force this logic through the DOM.

There are cases were this is desirable though, for instance if the element you are working with may also do other things, have other bindings, that should also process. In this case a trigger(event) can be used to invoke all the unknown methods that may be bound to the element.

It was also mentioned in the comments that one use of doing the trigger() is also that jQuery will auto bind the this variable to the element processing the event. If you are using this in the method then simply calling the method would not work as the this would not be defined in that case.

However, even in this case you don't have to force your logic through the DOM and incur jQuery overhead. You could also simply use the call() method. For instance...

function workHorse() {
  console.log(this.name);
}

$('button').on('click', workHorse);

console.log('without context');
workHorse();
console.log('with context');
workHorse.call($('button').get(0));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="tester">Click Me</button>

Using call() you can tell it which element to use as the this if you need to. So in either case, making jQuery create a new Event just to invoke a method is usually not necessary.

Though at the end of the day, it could be argued that it's also programmer flavor, so to each his own.

not best approach if context of `this` is needed in the handler — charlietfl, Jul 26 '17 at 15:36
For the given one, it doesn't appear to use the context. And I am more apt to directly call a method without context rather than creating a new event that is unnecessary in this case. — Taplar, Jul 26 '17 at 15:37
Agree regarding context in this situation but no need to create new event, just trigger existing one also. Then context will be correct if needed — charlietfl, Jul 26 '17 at 15:39
trigger() causes a new event. that's what I'm saying. direct invocation does not cause a new Event to be created, which is fine for this situation. Unless I misunderstood your response. — Taplar, Jul 26 '17 at 15:40
Thanks for this suggestion: mark(); //will execute on page load Could you offer an explaination of what is happening so I can understand slightly better — Andyww, Jul 27 '17 at 07:14

jQuery / trigger onload

1 Answers1