0

我通过从一个 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');
           }
        });
    })
});
4

2 回答 2

0

我发现了问题。附加后我应该使用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');
       }
    });
})
于 2013-09-02T09:34:43.720 回答
0

你可以试试这个技巧。设置超时（之后，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);
于 2014-03-26T03:17:17.047 回答