Questions tagged [jquery-on]

jquery on method can be used to bind events on dom elements. It also supports event delegation.

jQuery .on() attach an event handler function for one or more events to the selected elements. docs

$("selector").on( events [, selector ] [, data ], handler )

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

Examples

// Example 1
$("div").on("click", function(){
  // do something
});
// Example 2
function notify() {
  // do something
}
$("button").on("click", notify);
// Example 3
$("input").on("keyup keydown", function(){
  // do something
});

Resource

166 questions
577
votes
15 answers

Using jQuery to test if an input has focus

On the front page of a site I am building, several
s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the
s contains a
which, using jQuery, will keep the border if an input within it has focus.…
bloudermilk
  • 16,783
  • 13
  • 62
  • 94
167
votes
4 answers

Should all jquery events be bound to $(document)?

Where this is coming from When I first learned jQuery, I normally attached events like this: $('.my-widget a').click(function() { $(this).toggleClass('active'); }); After learning more about selector speed and event delegation, I read in…
Buck
  • 1,973
  • 2
  • 15
  • 18
47
votes
3 answers

Do I need to unbind jquery event before remove element?

I have a page using jquery-ui-dialog. Each time the dialog opens, page contents load in using ajax. Then it binds some event using jquery "on()". When the dialog close, it will empty its content. The question is, do I need to unbind the events on…
Reed
  • 1,567
  • 3
  • 20
  • 27
26
votes
1 answer

jQuery - how to use the "on()" method instead of "live()"?

I used live() for generated pages and frames. But in jQuery 1.9 this function is deprecated and does not work. I use on() instead of live() but this method works for one time, and does not work in frames. My code looks like this: …
Morteza
  • 2,095
  • 7
  • 34
  • 60
11
votes
2 answers

How does jQuery.on() function?

I have not seen the source of this function, but I wonder, does it work like this: Selects element(s) by their selectors Delegates the provided event-handlers to them Runs a setInterval on that selector and constantly un-delegating, and then…
user1386320
9
votes
4 answers

Jquery .on('change') not firing for dynamically added elements

So I've got a page with the following structure

Liam
  • 22,818
  • 25
  • 93
  • 157
8
votes
3 answers

Clicking on one button to trigger click event on another

I want to click on button 2 to trigger a click event on button 1. However, when I try the following, nothing happens when clicking on #2: no alert for #1 or #2. HTML:
Yarin
  • 144,097
  • 139
  • 361
  • 489
8
votes
3 answers

jQuery .on() instead of .delegate() without event

Is it possible to use jquery .on() method instead of .delegate() when there is no event to be listened to? According to the .on() documentation: .on( events [, selector] [, data] , handler(eventObject) ) The events argument is not optional. The…
KoU_warch
  • 2,122
  • 1
  • 25
  • 45
7
votes
5 answers

jQuery .on keyup and blur firing onload only

Problem: The blur and keyup events each fire once onload, and only onload. How can I get them to work correctly? jQuery: function myFunction(text){ alert(text); } $('#input1').on({ keyup: myFunction('keyup'), blur: myFunction('blur'), …
Mooseman
  • 18,150
  • 12
  • 67
  • 91
6
votes
1 answer

Browser sometimes ignores a jQuery click event during a CSS3 transform

When an element contains another element that is being animated via a CSS transition, click events are occasionally not fired. Test case: http://codepen.io/anon/pen/gbosy I have a layout where a series of images have captions which are revealed on…
Jodi Warren
  • 380
  • 4
  • 21
5
votes
1 answer

jQuery on change/input not working when updating value via JS

i have noticed that the event for $('#firstId') is not firing when the change is done by the javascript itself. why is this the case? is there a way to still fire the event? here is an example: $('#firstId').on('change input paste', function(){ …
Kevin Kloet
  • 1,076
  • 1
  • 11
  • 21
5
votes
2 answers

why is my .on('change') not working?

I'm adding inputs dynamically into my page, so need to use .on to attach events to them. I'm trying to attach a change event to a type="file" input, but it's just not working. I've tried two ways, the first: $('.container').on('change',…
rpsep2
  • 2,755
  • 9
  • 32
  • 50
5
votes
2 answers

How to reference dynamically added element after DOM loaded without a need to act on any events?

I know there is .on and .live (deprecated) available from JQuery, but those assume you want to attach event handlers to one ore more events of the dynamically added element which I don't. I just need to reference it so I can access some of the…
johntrepreneur
  • 3,956
  • 4
  • 33
  • 49
5
votes
4 answers

jQuery.on() - how initialize as soon as elements have been loaded

I'm trying to add the hoverIntent plugin to elements on my page, however some elements will be added to the DOM later on, which means I have to bind the plugin to future elements as well. How do you do that? I have seen the same questions on SO a…
Anriëtte Myburgh
  • 12,127
  • 11
  • 47
  • 71
4
votes
3 answers

Syntax for using selector in .on() method event-map?

I'm trying to create an .on() method using events-map. I want to change this: $("ul").on("click", "li", function() {...}); to something like this: $("ul").on({ click: function() {...}, mouseenter: function() {...}, mouseleave: function()…
mtl
  • 6,880
  • 2
  • 17
  • 20
1
2 3
11 12