추가 할 때 jquery를 실행할 수 없습니다.

Question

하나의 div에서 데이터 프로토 타입 속성을 사용하여 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);