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

时间:2014-09-04 10:19:51

标签: javascript jquery 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_Pay1, datepick_Pay2, datepick_totPay, datepick_deedFees是静态元素,已将它们分配给脚本。我使用克隆作为datepick_Pay3,datepick_Pay4创建文本字段,依此类推。

我无法弄清楚如何动态地将脚本分配给新创建的元素。我该怎么做?

3 个答案:

答案 0 :(得分:4)

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

var cloned = $('。PayDiv0')。first()。clone(true);

答案 1 :(得分:1)

当你克隆某些特别是有事件的元素时 使用参数为 克隆(真)

但是,根据事件在将事件复制到克隆元素时如何附加到实际元素上可能会影响实际情况,这将是有害的。

答案 2 :(得分:0)

您需要使用事件进行克隆。 http://api.jquery.com/clone/

  

var cloned = $('。PayDiv0')。first()。clone( true );

然后,您的脚本需要更改为适用于动态元素。这里只要输入元素获得焦点,就可以根据通配符id选择器设置datepicker,如果它还没有。

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