0

1 つの divの data-prototype属性からコードを取得して、html を追加しています。

問題は、後でjqueryを実行したい2つの選択ボックスを追加していることです。最初のオプションからオプションを選択した後、2番目の選択ボックスを更新したいので、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

問題が見つかりました。append の後、 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

このハックを試すことができます。setTimeout(後、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 に答える