Reputation: 40038

Using document.on without event handlers

I've run into this several times now, where I wish to use document.on() to manipulate an element, but cannot figure out how to use .on() without an event.

I often use ajax to inject elements into the DOM and frequently need to use document.on() to bind to those injected elements. This works perfectly when I wish to select an element and get at its information.

For example, to attach to a selector via the click event, one writes:

$(document).on('click', '.mledit', function(event) {
    alert($(this).val());
}

However, what if I wish to set focus to that element? How would I do that? I have tried:

$(document).on('focus', '.mledit');

and am at a loss as to what else to try.

The reason I need to do this is because at the moment (and I've been here before), the standard $('.mledit').focus(); is not working. Everything else seems alright, but that one instruction is not. So, I'm wondering if using document.on() is even possible in such a case.

Upvotes: 2

Answers (5)

Jack

Reputation: 10993

.on is meant for binding events, what you are looking for is a way to trigger an event on an element.

For example

$('.mledit').trigger('focus');

At the same time, jQuery also has some convenience/shortcut functions that under the hood will delegate to either .on or .trigger depending on how they are called.

For example you can also use the focus method to trigger focus

$('.mledit').focus()

Under the hood it really just delegates to the trigger method, however if you were to pass in a function it would instead bind that function to the passed in selecter.

Just saw your edit.

I'm not sure for certain why your focus event doesn't work when use use $('.mledit').focus() but I suspect it's because you are matching more then one element and you can only have focus on one element. To explain when you use a jQuery selector what you get back is a jQuery object, and when you call a method on this returned jQuery object you are actually calling it on all the matched elements.

As a shortcut to accessing the first element of the matched elements array you will often see

$('#someSelecter')[0]

So in your case to explicitly trigger the focus event on only one (and the first matched) element

You can use

$($('.mledit')[0]).focus() r

The reason for the double wrapping is because [0] returns a regular DOM element which doesn't have the jQuery methods on it (the wrapping creates a jQuery object).

Upvotes: 3

user1726343

Reputation:

Whenever you need to trigger event "foo" on elements that match "selector", use this syntax: