How to raise an event click, have fields added to Ajax?

Question

I have code that works correctly

$(document).on('click',"a.img,a.imgs",function() {
    $(this).next().find('a:first').click();
    return false;
});

But when I add new fields ajax ( for example show more), then with them this code does not work, and it's sad

Do you add the img class on your link when you add new fields via ajax? — Yann Chabot, Jan 28 '16 at 13:54
"and it's sad", I laughed hard. Make sure your added code complies to the selectors you're using in your event registrator. Also, encapsulate the event in a function, and run it again each time you add elements. — Glubus, Jan 28 '16 at 13:56

score 0 · Answer 1 · edited May 23 '17 at 12:15

Edited my answer as I misread your code and got everything mixed up.

Here's an explanation from another SO thread that might help you fix the problem:

It's probably not working due to one of:

Not using recent version of jQuery

Not wrapping your code inside of DOM ready

or you are doing something which causes the event not to bubble up to the listener on the document.

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

$(document).on("click"... not working?

How to raise an event click, have fields added to Ajax?

1 Answers1