在动态添加新的选择框后，多个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>

请帮助我，因为我真的陷入僵局，不再有任何想法来解决这个问题，我甚至没有玩。真的很感谢你的帮助。

谢谢。

插件：Jquery chained

Answer 1

＆＃13;

＆＃13;

$(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);


        });

    });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;