无法执行jquery后追加html

Question

我通过从数据原型属性从一个div附加HTML附加HTML。

问题是，我追加了两个选择框，我想在其中运行更高版本的jquery，因为我想从第一个选择选项后更新第二个，它只是不执行jQuery代码。在加载页面时插入的选择框都可以正常工作，但对于添加页面的用户不起作用。

我的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'); 
      } 
     }); 
    }) 
}); 

Answer 1

我发现这个问题。追加后，我应该使用on。

所以不是

$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'); 
     } 
    }); 
}) 

我知道

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

Answer 2

你可以试试这个技巧。 setTimeout（after，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);