Javascript 动态添加新selectbox后，多个jquery链接不起作用

我想请你的家庭教师来教我 我陷入了僵局，因为我不知道如何解决这个问题。我尝试了很多解决方案，但仍然没有奏效

问题

我想在表单中动态添加（附加）一个新的选择框。 添加选择框后，我想将事件侦听器添加到新的选择框， 因此，我们将听取新的选择框，并按其应有的方式工作

我的解决方案如下： HTML

请帮助我，因为我真的陷入了僵局，没有任何办法解决这个问题，我甚至都不玩了。非常感谢你的帮助

多谢各位

插件：

$（函数（）{
console.log（'run'）；
//链接文档中存在的每个模型
$（“.model”）。每个（函数（）{
$（this）.chained（$（“.product”，$（this.parent（））；
});
//将事件侦听器添加到新的附加选择框
//本该工作的，但不是
$（'#myform'）。on（'change'，'.product1'，function（e）{
e、 预防默认值（）；
$（“.model1”）。每个（函数（）{
console.log（this）；
返回；
$（this）.chained（$（.product1），$（this.parent（））；
});
});
//将新的选择框附加到#myform
var计数器=0；
var-counterSeries=1；
$（'#添加'）。在（'单击'）上，函数（事件）{
计数器++；
counterSeries++；
var append='InkToner'+counter+'seriesHi，谢谢。但是您的代码没有按应有的方式工作。
<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>

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