Question

我使用jquery Ajax动态生成dropdownList，生成dropdown的id 是specificationAttribute。我想生成新标记的创建添加事件（specificationAttribute），为此，我在script中创建了window.load：

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

但它不起作用。我尝试更像click，live，但我无法得到任何结果。

jsfiddle

来自小提琴的代码：

$(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 ");

    });
    }

Answer 1

你的小提琴有语法错误。由于下拉列表会生成一个选择，因此请使用一个。

对于我的回答，我使用了这个HTML，稍后会详细介绍：代码中的内容不匹配

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

代码更新:(请参阅内联评论，部分是建议，有些错误）

$(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 commented 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

Answer 2

@Uthman，可能就是你在onchange事件中选择和使用错误的id给出了不同的id，就像我在jsfiddle链接https://jsfiddle.net/a65m11b3/4/中所观察到的那样`

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

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

});.

Answer 3

它不起作用，因为在附加事件时你的html元素还没有存在。

您需要的是委派活动。基本上，您将事件附加到父元素+您有子选择器（通常通过classname或标记名）。这样就会触发现有事件，也会触发将来添加选择器的元素。

检查文档： https://api.jquery.com/on/#on-events-selector-data-handler

特别是这个例子的一部分：

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

更改事件对动态生成的元素不起作用 - Jquery

3 个答案: