使用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>