Javascript 在追加html后无法执行jquery

我通过从一个div的dataprototype属性中获取代码来附加html

问题是，我在后面添加了两个选择框，我想在它们上面运行jquery，因为我想在从第一个框中选择选项后更新第二个框，它只是不执行jquery代码。在页面加载时插入的选择框上一切正常，但对于那些来自append的选择框则不起作用

我的jQuery代码：

var $optionDefinitions = $('.option-definitions');
var collectionHolder = $('div#epos_productsbundle_variant_options');
var $addOptionsLink = $('<a href="#" class="add_options_link">Add an option</a>');
var $newLinkLi = $('<li></li>').append($addOptionsLink);

$(function() {
    collectionHolder.append($newLinkLi);
    collectionHolder.data('index', collectionHolder.find(':input').length);

    $addOptionsLink.on('click', function(e) {
        e.preventDefault();
        addOptionsForm(collectionHolder, $newLinkLi);
    });

    function addOptionsForm(collectionHolder, $newLinkLi) {
        var prototype = collectionHolder.data('prototype');
        var index = collectionHolder.data('index');
        var newForm = prototype.replace(/__name__/g, index);
        var $newFormLi = $('<li id="subform_'+index+'"></li>').append(newForm);

        $newLinkLi.before($newFormLi);
        collectionHolder.data('index', index + 1);
    }


   $optionDefinitions.change(function(event){
       var $optionid = $(this).val();
       var url = '{{ path('variant_options', {'id': 'optionid' }) }}'
       url = url.replace("optionid", $optionid)
       $.ajax({
           url: url,
           dataType: "html",
           success: function(data){
              $(event.target).next('select').html(data);
           },
           error: function(){
             alert('failure');
           }
        });
    })
});

---

我发现了问题。追加后我应该使用

所以不是

我知道了

---

你可以试试这个黑客。setTimeoutafter，1

 93             var self = this;
 94             var after = function() {
 95                 self. _container = $("#container");
 96                 self._slidebox = $("#slidebox");                                                                      
 97                 self._slidebox_icon = $("#slidebox_icon");
 98             }  
 99            
100             setTimeout(after,1);

$(body).on('change', $optionDefinitions, function(event){
   var $optionid = $(event.target).val();
   var url = '{{ path('variant_options', {'id': 'optionid' }) }}'
   url = url.replace("optionid", $optionid)
   $.ajax({
       url: url,
       dataType: "html",
       success: function(data){
          $(event.target).next('select').html(data);
       },
       error: function(){
         alert('failure');
       }
    });
})

 93             var self = this;
 94             var after = function() {
 95                 self. _container = $("#container");
 96                 self._slidebox = $("#slidebox");                                                                      
 97                 self._slidebox_icon = $("#slidebox_icon");
 98             }  
 99            
100             setTimeout(after,1);