Question

I was under the impression that jquery’s on() reacted to events attached elements dynamically added to the dom (via ajax or cloning, etc). However, the following is only working for the element attached to the dom at page load. The other copy I make of it using clone() is not being, well, handled.

$(document).ready(function () {
    $('.ship_via_dropdown').on('change', function () {
        console.log($(this));
        if ($(this).hasClass('prev_change')) {
            console.log('has');
        } else {
            $(this).addClass('prev_change');
            console.log('hasn\'t');
        }
    });
});

Code for cloning:

$(document).ready(function(){
    var form1 = $('.line_item_wrapper').children().clone(); 
    $('#new_line_content_1').html(form1);
});

HTML for dropdown (contents added by jquery db query on document ready)

<span class="select ship_via_select_container">
    <select class="ship_via_dropdown ship_via_dropdown_1">
    </select>
</span>

Thank you for any insight!

Answer 1

It does, but not in the way that you think. When used as you have used it:

$('.ship_via_dropdown').on('change',

It is really not different than using .change(). What you are looking for is event delegation. This takes the following form:

$("<selector to static ancestor>").on('change', '.ship_via_dropdown', function () {

Where <selector to static ancestor> is a selector to a static ancestor of the dynamically added elements. (one that is not dynamically created) As a last resort document can be used here. However for performance, this should be the closest static ancestor element.