动态地添加新的选择框后多个jquery链接不工作

Question

我想让你的导师Jquery chained. 我卡住了，并在僵局，因为不知道如何解决这个问题。我尝试了很多解决方案，但仍然没有工作。

问题

我要动态地添加（附加）一个新的选择框的形式。 添加选择框后，我想添加事件监听器到新的选择框 ，因此Jquery chained将会听到新的选择框并按原样工作。

我的解决方案如下图所示： HTML

<div id="container"> 
     <h3>Multiple Select Box</h3> 
     <form id="myform"> 
      <select class="product" id="product_0"> 

       <option value="1">Ink</option> 
       <option value="2">Toner</option> 
      </select> 
      <select class="model" id="product_0"> 


       <option value="series-1" class="1">1 series</option> 
       <option value="series-3" class="1">3 series</option> 
       <option value="series-5" class="1">5 series</option> 
       <option value="series-6" class="1">6 series</option> 
       <option value="series-7" class="1">7 series</option> 

       <option value="a1" class="2">A1</option> 
       <option value="a3" class="2">A3</option> 
       <option value="s3" class="2">S3</option> 
       <option value="a4" class="2">A4</option> 
       <option value="s4" class="2">S4</option> 
       <option value="a5" class="2">A5</option> 
       <option value="s5" class="2">S5</option> 
       <option value="a6" class="2">A6</option> 
       <option value="s6" class="2">S6</option> 
       <option value="rs6" class="2">RS6</option> 
       <option value="a8" class="2">A8</option> 
      </select> 

      <div id="addHere"></div> 


     </form> 

<a href="#" id="remove">rm</a> 
<a href="#" id="add">Add</a> 
    </div> 

因此，我们得到的时候document准备已经存在的两个选择框。 以下是动态追加选择框并将event listener添加到每个新选择框的代码。

<script type="text/javascript"> 
    $(function(){ 
     console.log('run'); 

     //chained each model that exist on document 
     $(".model").each(function() { 
      $(this).chained($(".product", $(this).parent())); 
     }); 

     //add event listener to new appended select box 
     // supposed to work,but not 
     $('#myform #addHere').on('click', '.product', function(event) { 
      event.preventDefault(); 
      $(".model").each(function() { 
       $(this).chained($(".product", $(this).parent())); 
      }); 
     }); 

     //append new select box to #myform 
     $('#add').on('click',function(event) { 
      var append = '<select class="product" id="product_1"><option value="">--</option><option value="1">Ink</option><option value="2">Toner</option></select><select class="model" id="product_1"><option value="series-1" class="1">1 series</option><option value="a1" class="2">A1</option></select>'; 
      $('#myform #addHere').append(append); 


     }); 

    }); 

</script> 

请帮助我，我真的死锁和没有任何想法了，解决这一点，我甚至不playing.Really感谢你的帮助。

谢谢。

插件：Jquery chained

Answer 1

$(function(){ 
 
     console.log('run'); 
 

 
     //chained each model that exist on document 
 
     $(".model").each(function() { 
 
      $(this).chained($(".product", $(this).parent())); 
 
     }); 
 

 
     //add event listener to new appended select box 
 
     // supposed to work,but not 
 
     $('#myform').on('change', '.product1',function(e) { 
 
      e.preventDefault(); 
 
      $(".model1").each(function() { 
 
       console.log(this); 
 
       return; 
 
       $(this).chained($(".product1", $(this).parent())); 
 
      }); 
 
     }); 
 

 
     //append new select box to #myform 
 

 
var counter = 0; 
 
var counterSeries = 1; 
 

 
     $('#add').on('click',function(event) { 
 
counter++; 
 
counterSeries++; 
 
      var append = '<select name="product'+counter+'" class="product'+counter+'" id="product"><option value=product'+counter+'>Ink</option><option value=model'+counterSeries+'>Toner</option></select><select name="model'+counter+'" class="model'+counter+'" id="product_'+counter+'"><option value="series-'+counter+'" class="product'+counter+'">'+counter+' series</option><option value="a1" class=model'+counterSeries+'">A'+counterSeries+'</option></select><br/>'; 
 
      $('#myform').append(append); 
 

 

 
     }); 
 

 
    });

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
 
    <script src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.10" type="text/javascript" charset="utf-8"></script> 
 
    <script src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.10" type="text/javascript" charset="utf-8"></script> 
 

 

 
<div id="container"> 
 
     <h3>Multiple Select Box</h3> 
 
     <form id="myform"> 
 
      <select class="product" id="product"> 
 

 
       <option value="1">Ink</option> 
 
       <option value="2">Toner</option> 
 
      </select> 
 
      <select class="model" id="product"> 
 

 

 
       <option value="series-1" class="1">1 series</option> 
 
       <option value="series-3" class="1">3 series</option> 
 
       <option value="series-5" class="1">5 series</option> 
 
       <option value="series-6" class="1">6 series</option> 
 
       <option value="series-7" class="1">7 series</option> 
 

 
       <option value="a1" class="2">A1</option> 
 
       <option value="a3" class="2">A3</option> 
 
       <option value="s3" class="2">S3</option> 
 
       <option value="a4" class="2">A4</option> 
 
       <option value="s4" class="2">S4</option> 
 
       <option value="a5" class="2">A5</option> 
 
       <option value="s5" class="2">S5</option> 
 
       <option value="a6" class="2">A6</option> 
 
       <option value="s6" class="2">S6</option> 
 
       <option value="rs6" class="2">RS6</option> 
 
       <option value="a8" class="2">A8</option> 
 
      </select> 
 

 
      <div id="addHere"></div> 
 

 

 
     </form> 
 

 
<a href="#" id="remove">rm</a> 
 
<a href="#" id="add">Add</a> 
 
    </div>