javascript - change event doesn't work on dynamically generated elements - Jquery - Stack Overflow

admin管理员组

文章数量:1317909

I generate a dropdownList dynamicly with jquery Ajax , generated dropdown's id is specificationAttribute . I want create add event for new tag was generated (specificationAttribute) , to do this I created Belowe script in window.load:

$(document).on('change', '#specificationattribute', function () {
    alert("Clicked Me !");
});

but it does not work . I try any way more like click , live but I cant any result.

jsfiddle

Code from fiddle:

$(window).load(function () {
  $("#specificationCategory").change(function () {
        var selected = $(this).find(":selected");
        if (selected.val().trim().length == 0) {
            ShowMessage('please selecet ...', 'information');
        }
        else {

            var categoryId = selected.val();
            var url = $('#url').data('loadspecificationattributes');

            $.ajax({
                url: url,
                data: { categoryId: categoryId, controlId: 'specificationattribute' },
                type: 'POST',
                success: function (data) {
                    $('#specificationattributes').html(data);
                },
                error: function (response) {
                    alert(response.error);

                }
            });

        }

    });



    $(document).on('change', '#specificationAttribute', function () {
        alert("changed ");

    });
    }

I generate a dropdownList dynamicly with jquery Ajax , generated dropdown's id is specificationAttribute . I want create add event for new tag was generated (specificationAttribute) , to do this I created Belowe script in window.load:

$(document).on('change', '#specificationattribute', function () {
    alert("Clicked Me !");
});

but it does not work . I try any way more like click , live but I cant any result.

jsfiddle

Code from fiddle:

$(window).load(function () {
  $("#specificationCategory").change(function () {
        var selected = $(this).find(":selected");
        if (selected.val().trim().length == 0) {
            ShowMessage('please selecet ...', 'information');
        }
        else {

            var categoryId = selected.val();
            var url = $('#url').data('loadspecificationattributes');

            $.ajax({
                url: url,
                data: { categoryId: categoryId, controlId: 'specificationattribute' },
                type: 'POST',
                success: function (data) {
                    $('#specificationattributes').html(data);
                },
                error: function (response) {
                    alert(response.error);

                }
            });

        }

    });



    $(document).on('change', '#specificationAttribute', function () {
        alert("changed ");

    });
    }

• javascript
• jquery
• ajax

Share Improve this question Follow edited Apr 23, 2016 at 6:34 Mark Schultheiss 34.2k1212 gold badges7272 silver badges112112 bronze badges asked Apr 23, 2016 at 5:21 Uthman RahimiUthman Rahimi 70877 silver badges2323 bronze badges 22

• 1 Can you post the markup as well ? – Luke P. Issac Commented Apr 23, 2016 at 5:24
• 2 Uthman, can you set up your example as a jsfiddle? It will be much easier to help you. – Hyder B. Commented Apr 23, 2016 at 5:26
• 2 Is the ID specificationattribute or specificationAttribute? You used one in the sample and another in your ment. – Brandon Gano Commented Apr 23, 2016 at 5:29
• 1 No html appears at linked jsfiddle? – guest271314 Commented Apr 23, 2016 at 5:36
• 1 $(document).on('change', '#specificationAttribute', function () { will work for only single element... – Rayon Commented Apr 23, 2016 at 5:40

 |  Show 17 more ments

3 Answers 3

Sorted by: Reset to default 4

Your fiddle has syntax errors. Since a dropdownlist generates a select, let's use one.

For my answer I used THIS HTML, more on this later: things did not match in your code

<select id="specificationAttribute" name="specificationAttribute">
</select>

Code updated: (see inline ments, some are suggestions, some errors)

$(window).on('load', function() {
  $("#specificationCategory").on('change',function() {
    var selected = $(this).find(":selected");
    // if there is a selection, this should have a length so use that
    // old:  if (selected.val().trim().length == 0) {
    if (!selected.length) { // new
    // NO clue what this is and not on the fiddle so mented it out
    //  ShowMessage('please selecet ...', 'information');
      alert("select something a category");// lots of ways to do this
    } else {
      var categoryId = selected.val();
      var url = $('#url').data('loadspecificationattributes');
      $.ajax({
        url: url,
        data: {
          categoryId: categoryId,
          controlId: 'specificationattribute'
        },
        type: 'POST',
        success: function(data) {
           // THIS line id does not match my choice of specificationAttribute so I changed it
          $('#specificationAttribute').html(data);
        },
        error: function(response) {
          alert(response.error);
        }
      });
    }
  });

  // THIS should work with the markup I put as an example
  $(document).on('change', '#specificationAttribute', function() {
    alert("changed ");
  });
});// THIS line was missing parts

@Uthman, it might be the case that you have given different id to select and using wrong id in onchange event as i observed in the jsfiddle link https://jsfiddle/a65m11b3/4/`

success: function (data) {
        $('#specificationattributes').html(data);
        },and  $(document).on('change', '#specificationAttribute', function () {
        alert("changed ");

    });  $(document).on('change', '#specificationAttribute', function () {
    alert("changed ");

});.

It doesnt work because at the moment of attaching event your html element doesnt existi yet.

What you need are delegated events. Basically, you attach event to parent element + you have selector for child (usually by classname or tagname). That way event fires for existing but also for elements that meet selector added in future.

Check documentation here: https://api.jquery./on/#on-events-selector-data-handler

Especially part with this example:

$( "#dataTable tbody" ).on( "click", "tr",      
function() {
console.log( $( this ).text() );
});

本文标签： javascriptchange event doesn39t work on dynamically generated elementsJqueryStack Overflow