Question

This is part of my $(document).ready

$("#dynaffiliate").on("click", "a.ajaxpaginate", function(event){
 event.preventDefault();
    alert($(this).text());
});  

<div id="dynaffiliate"> exists at pageload.

When I inject a bunch of a elements with that class, the event is not fired. I’m using firefox. I’ve also tried using just plain a with no class and nothing happens..

Now, I am also thinking deeper into this – an a element may be impossible to handle in this manner – since the browser will just navigate to the link before it has a chance to bubble the event up to the parent. Am I better off using some other element instead of an a tag?

Answer 1

Works for me in all browsers. Aren’t you reloading DIV?

// e.g.
$('#dynaffiliate').html('<a class="ajaxpaginate">Link text</a>');

// instead of
$('#dynaffiliate')
    .html('<div id="dynaffiliate"><a class="ajaxpaginate">Link text</a></div>');
// or
$('#dynaffiliate').append('<a class="ajaxpaginate">Link text</a>');

It might also be possible you are using jQuery version prior to 1.7. You should see error message in Firebug console in that case.