Question

我无法找到我使用JQuery克隆的此表的解决方案。我能够克隆表并更新ID和NAME属性以避免html冲突。当我使用表的第一个（原始）副本时，Select下拉列表仅触发事件到其JQuery。但是，克隆版本不会触发我用于填写“描述数量”和“价格”字段的必需事件。我发布了我的表和JQuery。有人可以让我知道我错过了什么让这个工作？我通过创建两个带有各自唯一ID的表来测试JQuery，我用它来触发事件，这很好。然后，当我使用JQuery克隆表时，不会触发事件。

            <table>
                <tr>
                    <td style="width:20%;">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-duplicate addsection"></span>
                            </div>
                            <select class="form-control" id="ProductCode1" name="ProductCode1" style="border-bottom-color:black!important;border-color:white;">
                                <option selected>Select Product</option>
                                <option value='292' data-description='APRIL Afternoon At the Greenhouse TICKET' data-price='35.00'>AAATG</option>
                                <option value='285' data-description='APRIL AFTERNOON AT THE GREENHOUSE Ticket EARLYBIRD SPECIAL' data-price='30.00'>AAATGearlybird</option>
                                <option value='30' data-description='Organic Adzuki Beans 1/2 Lb' data-price='4.25'>AB12LB</option>
                                <option value='31' data-description='Organic Adzuki Beans 1/4 Lb' data-price='2.25'>AB14LB</option>
                                <option value='29' data-description='Organic Adzuki Beans 1 Lb' data-price='8.00'>AB1LB</option>
                                <option value='47' data-description='Organic Adzuki Seeds 1 Lb' data-price='5.00'>ABS1LB</option>
                                <option value='145' data-description='Alberto&#x27;s Lemon/Garlic Salad Dressing 16 Oz.' data-price='11.00'>Alberto&#x27;s Dressing</option>
                                <option value='241' data-description='Organic Fenugreek Sprouted Beans 4 oz.' data-price='2.00'>APRIL</option>
                                <option value='310' data-description='Organic Fenugreek Sprouted Beans 16 oz' data-price='7.75'>April16oz</option>
                                <option value='309' data-description='Organic Fenugreek Sprouted Beans 8 oz' data-price='4.00'>April8oz</option>
                                <option value='284' data-description='SeaVeggieSpecialAUGUST1Kelp/1Dulse/1TripleBlendPACKAGE of 3' data-price='11.50'>AUGUST</option>
                                <option value='271' data-description='DM Organic Tomato Basil Sauce CASE' data-price='36.00'>BB BasilS case</option>
                                <option value='273' data-description='DM Organic Tomato Chili Sauce CASE' data-price='36.00'>BB ChiliS case</option>
                                <option value='276' data-description='DM Organic Linguine Pasta CASE' data-price='36.00'>BB Lpasta case</option>
                                <option value='277' data-description='DM Organic Extra Virgin Olive Oil 500ML CASE' data-price='84.00'>BB OO 500ML</option>
                                <option value='278' data-description='DM Organic Extra Virgin Olive Oil 750ML CASE' data-price='132.00'>BB OO 750ML</option>
                                <option value='275' data-description='DM Organic Spaghetti Pasta CASE' data-price='36.00'>BB Spasta case</option>
                                <option value='274' data-description='DM Organic Tagliatelle Pasta CASE' data-price='36.00'>BB Tpasta case</option>
                                <option value='272' data-description='DM Organic Tomato Vegetable Sauce CASE' data-price='36.00'>BB VegS case</option>
                                <option value='117' data-description='Organic Mixed Beans 1 Lb' data-price='8.00'>BEEMB</option>
                            </select>
                        </div>
                    <td style="width:70%;"><input id="ProductDesc1" class="form-control" style="width: 100%; border-bottom-color: black!important; border-color: white;" name="ProductDesc1" type="text" value="" /></td>
                    <td><input id="quantity1" class="form-control" style="width: 50px; border-bottom-color: black!important; border-color: white; text-align: center;" name="quantity1" type="text" value="0" placeholder="1" /></td>
                    <td>
                        <input id="ProductPrice1" class="form-control cost" style="width: 95px; text-align: center; border-bottom-color: black!important; border-color: white;" name="ProductPrice1" type="text" value="" placeholder="$0.00" />
                    </td>
                    <td>
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-eject remove"></span>
                        </div>
                    </td>
                </tr>
            </table>

执行克隆并更新ID和NAME属性的JQuery：

<script>
            var template = $('#sections .section:first').clone();
            var sectionsCount = 1;
            $('body').on('click', '.addsection', function () {
                sectionsCount++;
                var section = template.clone().find(':input').each(function () {
                    var newId = this.id.substring(0, this.id.length - 1) + sectionsCount;
                    var newName = this.name.substring(0, this.name.length - 1) + sectionsCount;
                    this.id = newId; 
                    this.name = newName;
                }).end()
                    .appendTo('#sections');
                return false;
            });

            //remove section
            $('#sections').on('click', '.remove', function () {
                $(this).parent().fadeOut(300, function () {
                    $(this).parent().parent().empty();
                    return false;
                });
                return false;
            });
    </script>

Finally, the JQuery that listen to the Event to fill-in the remaining fields when I select a Product.

    $(document).ready(function () {

        $('#ProductCode1').on("change", function () { alert("It Works!") });
        $('#ProductCode2').on("change", function () { alert("It Works again!") });
        $('#ProductCode3').on("change", function () { alert("It Works a third time!") });
                    }); 
    </script>

Answer 1

{p> jQuery内部$(document).ready()函数内的代码仅在加载页面时适用于可用的DOM元素

因此，为了使其适用于动态克隆的下拉列表，请更新您的jQuery绑定代码，如下所示：

的此：

$(document).ready(function () { $('#ProductCode1').on("change", function () { alert("It Works!") }); $('#ProductCode2').on("change", function () { alert("It Works again!") }); $('#ProductCode3').on("change", function () { alert("It Works a third time!") }); });

至此：

$(document).on('change', '#ProductCode1', function(){ alert("It Works!") }); $(document).on('change', '#ProductCode2', function(){ alert("It Works again!") }); $(document).on('change', '#ProductCode3', function(){ alert("It Works a third time!") });

克隆的选择字段不会触发事件

1 个答案: