Jquery click not being bound

Question

I have some html appended using handlebars, but am unable to get the event from a hyperlink to fire:

JS - this code is called during document.ready.

$(".media-item a.meddelete").unbind("click");
$(".media-item a.meddelete").click(function (event) {
    event.preventDefault();
    var id = $(this).data("assetid");
    alert(id);
});

HTML

<div class="media-item">
   <p><a href="ImageManipulation.aspx">Edit</a></p>
   <p><a href="#" class="meddelete">Delete</a></p>
</div>

I can't see what is wrong, any ideas?

Does the binding happen before or after the HTML is injected? — Mike Christensen
– Mike Christensen, Commented Sep 16, 2013 at 15:11
Handlebars will also be running at document.ready() so the above html will not exist until after that. The 2 answers below, using 'on()' & delegation will fix this problem. If they do not work then there is something else wrong. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 16, 2013 at 15:18

Rory McCrossan · Accepted Answer · 2013-09-16 15:11:38Z

2

Assuming by 'injected' you mean that the elements in your example are appended to the DOM dynamically after the page has loaded, you need to use a delegated event handler:

$(document).on('click', '.media-item a.meddelete', function (event) {
    event.preventDefault();
    var id = $(this).data("assetid");
    alert(id);
});

Note that document in my example should be changed to be the nearest static element for best performance.

answered Sep 16, 2013 at 15:11

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DavidB Over a year ago

Its not appended as such, its 'put' into the dom somewhere between the start and end. Will your code example still work?

Rory McCrossan Over a year ago

It will. You should use this method (delegated events) to hook to any element which is created after the page was loaded.

DavidB Over a year ago

Worked like a charm, as you suggested I bound this to the div that holds the appended element.

j08691 · Accepted Answer · 2013-09-16 15:11:18Z

2

Change this:

$(".media-item a.meddelete").click(function (event) {

to this:

$(document).on('click', ".media-item a.meddelete", function (event) {

If you're dynamically adding elements to the page, you need to use jQuery's event delegation syntax.

answered Sep 16, 2013 at 15:11

j08691

208k33 gold badges269 silver badges281 bronze badges

2 Comments

DavidB Over a year ago

Thanks, what's the difference, as I copied from another piece of code that works that is doen like above?

j08691 Over a year ago

The syntax you used in your question will work for elements that already exist at the time the code is executed. The code I posted will work for any elements that exist at the time the code was executed, as well as any new matching elements that are dynamically added later.

Collectives™ on Stack Overflow

Jquery click not being bound

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related