Side navigation
#11416 closed bug (invalid)
Opened February 29, 2012 04:16AM UTC
Closed February 29, 2012 01:23PM UTC
Last modified March 01, 2012 01:20AM UTC
The .on() binding not work on ajax callback which element is newly created, but .live() works
| Reported by: | leckylao@gmail.com | Owned by: | leckylao@gmail.com |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
$('a.ajax_destroy')
.on 'ajax:success', (event, data, status, xhr) =>
console.log 'here'
Sorry for coffee-script. Basically I bind the link's ajax success callback, it works on existing links but not on newly created link.
However It works on using .live(). And the docs http://api.jquery.com/live/ says .live() is deprecated. Therefore, I assume this is a bug.
Attachments (0)
Change History (7)
Changed February 29, 2012 04:20AM UTC by comment:1
Changed February 29, 2012 10:57AM UTC by comment:2
| owner: | → leckylao@gmail.com |
|---|---|
| status: | new → pending |
Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.
Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.
Changed February 29, 2012 11:20AM UTC by comment:3
I am happy to help and wish to provide reduced test case if I can. But as I mentioned. This case involved ajax request and I am not sure how to provide test which involve ajax.
Changed February 29, 2012 01:23PM UTC by comment:4
| resolution: | → invalid |
|---|---|
| status: | pending → closed |
You're using .on() incorrectly, please re-read the docs or ask for help on the forum.
Changed March 01, 2012 12:46AM UTC by comment:5
Replying to [comment:4 dmethvin]:
You're using .on() incorrectly, please re-read the docs or ask for help on the forum.OK, I've re-read the docs and rewrite to use delegated event handler:
$('ul li').on('ajax:success', 'a.ajax_destroy', function(event, data, status, xhr) {
console.log('here');
But it's still not binding the newly created element that got created after the ajax callback. And I think I am using the correct format in this case.
Changed March 01, 2012 12:48AM UTC by comment:6
Sorry, my reply was ambiguous.
You're using .on() incorrectly, please re-read the docs AND ask for help on the forum.
This is the bug tracker, so we accept bug reports. It sounds like you need programming help.
Changed March 01, 2012 01:20AM UTC by comment:7
Replying to [comment:6 dmethvin]:
I have made it work with: $(document).on('ajax:success', 'a.ajax_destroy', function(event, data, status, xhr) instead of $('ul li').on('ajax:success', 'a.ajax_destroy', function(event, data, status, xhr).
But on the doc says it's possible that "A delegated-events approach attaches an event handler to only one element". So is it a bug here or not really?
Browser: Google Chrome 17.0.963.56