Javascript 将java脚本分配给克隆的HTML元素

我有一个html div，我使用Jquery克隆它。该div包含标签和文本字段。动态生成并分配它们的ID。我对此没有异议。 java脚本被分配给原始div的文本字段。克隆的文本字段没有分配javascript

我需要分配的脚本：

<script>
            $(function() {
                $("#datepick_onBooking,#datepick_Pay1,#datepick_Pay2,#datepick_totPay,#datepick_deedFees").datepicker();
            });
        </script>

<script>

            var i = 3;
            //When DOM loaded we attach click event to button
            $(document).ready(function() {

                $('#addAnotherPayment').click(function() {

                    var cloned = $('.PayDiv0').first().clone();
                    var noOfDivs = $('.PayDiv0').length+2;
                    cloned.insertBefore("#totPayForm");

                    // append count to the ids
                    cloned.attr('id', 'PayDiv' + noOfDivs);
                    cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
                    cloned.find('input[type="text"]').attr('id', 'datepick_Pay'+ noOfDivs);
                    cloned.find('input[type="number"]').attr('id', 'amount_Pay'+ noOfDivs);

                    cloned.find('.PayLbl2').html("Payment No " + i++ + ':');
                });

            });
        </script>

$（函数（）{
$（“#datepick_on Booking，#datepick_Pay1，#datepick_Pay2，#datepick_totPay，#datepick_deedFees”）.datepicker（）；
});

我用来制作克隆的脚本：

<script>
            $(function() {
                $("#datepick_onBooking,#datepick_Pay1,#datepick_Pay2,#datepick_totPay,#datepick_deedFees").datepicker();
            });
        </script>

<script>

            var i = 3;
            //When DOM loaded we attach click event to button
            $(document).ready(function() {

                $('#addAnotherPayment').click(function() {

                    var cloned = $('.PayDiv0').first().clone();
                    var noOfDivs = $('.PayDiv0').length+2;
                    cloned.insertBefore("#totPayForm");

                    // append count to the ids
                    cloned.attr('id', 'PayDiv' + noOfDivs);
                    cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
                    cloned.find('input[type="text"]').attr('id', 'datepick_Pay'+ noOfDivs);
                    cloned.find('input[type="number"]').attr('id', 'amount_Pay'+ noOfDivs);

                    cloned.find('.PayLbl2').html("Payment No " + i++ + ':');
                });

            });
        </script>

var i=3；
//加载DOM时，我们将click事件附加到按钮
$（文档）.ready（函数（）{
$（“#添加其他付款”）。单击（函数（）{
var clone=$（'.PayDiv0'）.first（）.clone（）；
var noOfDivs=$（'.PayDiv0'）。长度+2；
克隆。插入前（“#totPayForm”）；
//将计数附加到ID
克隆的.attr（'id'，'PayDiv'+noOfDivs）；
克隆.find（'label'）.attr（'id'，'PayLbl'+noOfDivs）；
克隆的.find（'input[type=“text”]'）.attr（'id'，'datepick\u Pay'+noOfDivs）；
克隆.find（'input[type=“number”]'））.attr（'id'，'amount\u Pay'+noOfDivs）；
cloned.find（'.PayLbl2'）.html（“付款编号”+i++'：'）；
});
});

datepick\u Pay1、datepick\u Pay2、datepick\u totPay、datepick\u deedFees

是静态元素，它们已分配给脚本。我使用克隆创建文本字段，如

datepick\u Pay3、datepick\u Pay4

，等等

---

我不知道如何将脚本动态分配给新创建的元素。我如何才能做到这一点？

一个布尔值，指示是否应将事件处理程序和数据与元素一起复制。 换这一行

---

var clone=$（'.PayDiv0'）.first（）.clone（true）

一个布尔值，指示事件处理程序和数据是否应与元素一起复制。 换这一行

---

var clone=$（'.PayDiv0'）.first（）.clone（true）

当你克隆某些东西，特别是有事件的元素时 将参数用作 克隆（真）

---

但是，当将事件复制到克隆的元素时，根据事件在实际元素上的附加方式，这将是有害的。

当您克隆某些东西时，尤其是克隆具有事件的元素时 将参数用作 克隆（真）

---

但是，如果将事件复制到克隆的元素可能会影响实际元素，那么这将取决于事件在实际元素上的附加方式。

您需要使用事件进行克隆

var clone=$（'.PayDiv0'）.first（）.clone（true）

然后，您的脚本需要更改以用于动态元素。在这里，只要输入元素获得焦点，就根据通配符id选择器（如果它还没有通配符id选择器）来分配日期选择器

 $(function() {
            $('body').on('focus',"input[id^=datepick_]", function(){
                if(!$(this).hasClass('.hasdatepicker'))
                {
                 $(this).datepicker();
                }
            });      
});

---

您需要使用事件进行克隆

var clone=$（'.PayDiv0'）.first（）.clone（true）

然后，您的脚本需要更改以用于动态元素。在这里，只要输入元素获得焦点，就根据通配符id选择器（如果它还没有通配符id选择器）来分配日期选择器

 $(function() {
            $('body').on('focus',"input[id^=datepick_]", function(){
                if(!$(this).hasClass('.hasdatepicker'))
                {
                 $(this).datepicker();
                }
            });      
});

查看委派事件查看委派事件