通过ajax调用更新DOM后，单击事件上的jQuery丢失

Question

I have something working, but as I'm not a so used to code in JS, I don't know if it's the right way to do it.

I have a simple:

<div class="offers"></div>

And by calling myUrl , I retrieve ready to use HTML (some .offer div) that I then append to the .offers div. But I want to have a click event on these freshly appended .offer

$.ajax({
    'url': myUrl,
    success: function(data){
        offers.append(data);
        $('.offer').on('click', function(e) {
            e.preventDefault();
            $('.offers .offer').removeClass('selected');
            $(this).addClass('selected');
        });
    }
});

Thank you for your expertise !

Answer 1

You can simply try that:

$(document).on('click', '.offers .offer', function(e) {
    // Code here
});

Ideally, for performance purpose, replace document by the nearest ID on your DOM.

UPDATE : After a comment from A. Wolff, I removed the "document.ready" not needed here. (please read comment).

Answer 2

Put the event handler outside the ajax:

$.ajax({
    'url': myUrl
}).done(function(data){
    var offers = $('.offers');
    offers.append(data);
});
$('.offers').on('click','.offer' function(e) {
   e.preventDefault();
   $('.offers').find('.offer').removeClass('selected');
   $(this).addClass('selected');
});