jQuerry's on method fails to respond to newly added elements through the clone() function

Question

jQuerry's on method fails to respond to newly added elements through the clone() function

I always thought that jquery's on() function would handle events for dynamically added elements in the DOM, such as those added via ajax or cloning. However, I'm finding that it only works for elements already attached to the dom at page load. Cloned copies of these elements using clone() are not being 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');
        }
    });
});

Here is the code used for cloning:

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

This is the HTML structure for the dropdown (contents added dynamically by a jquery db query on document ready):

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

Any tips or insight on this issue would be greatly appreciated!

javascript jquery

Answer 1

Answer №1

You have two options to handle the event:

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

Alternatively, you can utilize .clone(true) for cloning along with events. (Keep in mind: this method only works if you're cloning AFTER the event handler is attached.)

Answer 2

You have two options to handle the event:

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

Alternatively, you can utilize .clone(true) for cloning along with events. (Keep in mind: this method only works if you're cloning AFTER the event handler is attached.)

Answer 3

Answer №2

Yes, it does work but not as you might expect. When utilizing it in the following manner:

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

Essentially, this is no different than simply using .change(). What you actually need to implement is event delegation, which looks like this:

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

Here,

<selector to static ancestor>

should point to a static ancestor of the dynamically inserted elements (i.e., one that is not created dynamically). As a final option, you can use document here but for better performance, choose the closest static ancestor element.

Answer 4

Yes, it does work but not as you might expect. When utilizing it in the following manner:

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

Essentially, this is no different than simply using .change(). What you actually need to implement is event delegation, which looks like this:

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

Here,

<selector to static ancestor>

should point to a static ancestor of the dynamically inserted elements (i.e., one that is not created dynamically). As a final option, you can use document here but for better performance, choose the closest static ancestor element.

Answer 5

Answer №3

When using jquery's on(), it will respond to events even on elements that are dynamically added.

However, this is only true if you use delegated events. The old live method always delegated events to the document.

Answer 6

When using jquery's on(), it will respond to events even on elements that are dynamically added.

However, this is only true if you use delegated events. The old live method always delegated events to the document.

Answer 7

Answer №4

Modify the following line:

$('select.ship_via_dropdown').on('change', function () {

to read like this:

$(document).on('change',"select.ship_via_dropdown", function () {

Answer 8

Modify the following line:

$('select.ship_via_dropdown').on('change', function () {

to read like this:

$(document).on('change',"select.ship_via_dropdown", function () {

jQuerry's on method fails to respond to newly added elements through the clone() function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What could be the reason for my post jQuery Ajax request sending JSON data?

Using Swagger with Next.js

Node js server for world's warm greetings

The spinning loading wheel on Firefox persists even after submitting the iFrame

Turn off the chrome react DevTools when deploying to production to ensure the

Issues with retrieving data from Firestore and storing it into an array in a React

The subsequent middleware in express next() is failing to trigger the next middleware within the .catch() block

Changing the .load function based on user input

create a JavaScript array variable for posting items

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Is there a way to automatically close one menu when another is opened by clicking?

Difficulty comprehending the response from an AJAX post is being experienced

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

I am wondering if it is feasible for a POST route to invoke another POST route and retrieve the response ('res') from the second POST in Express using Node.js

Dynamically adjust the gage value

The Xero Node OAuth Authorize Callback URL is malfunctioning after granting access

Learn how to make a mesh in Three Js React refract its environment while keeping the background hidden from the camera

Retrieve the data stored in an array of objects

Attaching a click event to a nested element within an AngularJS directive

Broadening the capabilities of jQuery through a versatile function