动态添加新的选择框后，多个 jquery 链接不起作用

Question

我想让你的Jquery导师链接。 我被卡住并陷入僵局，因为不知道如何解决这个问题。我尝试了很多解决方案，但仍然没有奏效。

问题

我想动态地向表单添加（附加）一个新的选择框。 添加选择框后，我想向新的选择框添加事件侦听器，因此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 链式

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>