使用Javascript添加div的Javascript

Question

我有一個按鈕「添加」，在窗體中添加div。

在div中添加，也會有JavaScript（1選擇哪個取決於另一個選擇）。

我使用Symfony2中，爲了增加DIV我用的Symfony文檔：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $container = $('div#mybundle_serveur_typesDetails'); 
     var $addLink = $('<a href="#" id="add_type" class="">Ajouter un type</a>'); 
     $container.append($addLink); 
     $addLink.click(function(e) { 
      addSource($container); 
      e.preventDefault(); // évite qu'un # apparaisse dans l'URL 
      return false; 
     }); 

     var index = $container.find(':input').length; 

     if (index == 0) { 
      addSource($container); 
     } else { 
      $container.children('div').each(function() { 
       addDeleteLink($(this)); 
      }); 
     } 

     function addSource($container) { 
      var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'type n°' + (index+1)) 
       .replace(/__name__/g, index)); 

      addDeleteLink($prototype); 
      $container.append($prototype); 
      index++; 
     } 

     function addDeleteLink($prototype) { 
      $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>'); 

      $prototype.append($deleteLink); 

      $deleteLink.click(function(e) { 
       $prototype.remove(); 
       e.preventDefault(); // évite qu'un # apparaisse dans l'URL 
       return false; 
      }); 
     } 
    }); 
</script> 

而且在申報單的JavaScript是：通過第一個腳本創建

<script> 
    var $all = $('.type_js'); 
    $all.each(
     function() { 
      $(this).change(function() { 
       var parent = $(this).attr("id"); 
       var array_id = parent.split("_"); 
       var id = array_id[3]; 
       var $detail = $('#mybundle_serveur_typesDetails_'+id+'_detailType'); 
       $.post(" {{ path('updateDetailType') }}", { idType: $(this).val()}, function (data) { 
        $detail.find('option').remove(); 
        if(data.length > 0) { 
         for (i in data) { 
          var option = $('<option></option>').attr('value', data[i][0]).text(data[i][1]); 

          $detail.append(option); 
         } 
        } 
        else { 
         var option2 = $('<option></option>').attr('value', null).text('-- Choisir une zone --'); 
         $detail.append(option2); 
        } 
       }, 'json'); 
      }); 
     } 
    ); 
</script> 

的div有一個類'type_js'，我用這個類對每個div進行change（）調用。

但是，如果我通過第一個腳本創建一個div，divs有類'type_js'，但沒有任何事情發生......我是JS和JQuery的新手，但我猜JavaScript是在頁面創建時加載的，在這個時刻divs不在那裏。

您將如何使其工作？有沒有辦法讓他在調用第一個腳本後重新加載JavaScript？

謝謝！

Answer 1

的解決方案是使用Event Delegation：

<script> 

    $(document).on("change", ".type_js", function() { 

     var parent = $(this).attr("id"); 
     var array_id = parent.split("_"); 
     var id = array_id[3]; 
     var $detail = $('#mybundle_serveur_typesDetails_'+id+'_detailType'); 
     $.post(" {{ path('updateDetailType') }}", { idType: $(this).val()}, function (data) { 
      //$zone.remove(); 
      //$quartier.clean(); 
      $detail.find('option').remove(); 
      if(data.length > 0) { 
       for (i in data) { 
        var option = $('<option></option>').attr('value', data[i][0]).text(data[i][1]); 

        $detail.append(option); 

       } 
      } 
      else { 
       var option2 = $('<option></option>').attr('value', null).text('-- Choisir une zone --'); 
       $detail.append(option2); 

      } 
     }, 'json'); 
    }); 

</script>