Question

我通过从一个div中获取 data-prototype 属性的代码来附加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);

在追加html后无法执行jquery

2 个答案: