jQuery：克隆元素和事件

Posted 2023-02-22

【中文标题】jQuery：克隆元素和事件

【英文标题】：jQuery: clone elements AND events

【发布时间】：2011-12-20 19:38:50

【问题描述】：

每当我使用 ajax 动态创建新内容、.clone()、append() 等时，新元素都会丢失我编写的所有触发器和事件 =(

复制后，对其他元素有效的简单操作（例如在复制的元素上添加类）不再有效。任何新的 ajax 内容都不起作用。命令按钮不再起作用。我能做什么？

我正在克隆这个 html，命令按钮不再起作用。样式化 span 元素不再适用于 CLONED 元素：

<div name="shows" id="x"><br/> <!-- The ID depends on the database-->
    <div name="shows" id="x">
        ID: <input disabled="disabled" size="7" value="x" name="id" />
        Status: 
        <select name="status" >
          <option selected="selected" >Display</option>
          <option >Hide</option>
        </select>
        <br/><br/>
        <span class="required" id="date_txt">*Date: </span><input type="text" value="" name="date" />
        &nbsp;&nbsp;
        <span class="required" id="title_txt">*Title: </span><input type="text" size="65" value="" name="title" />
        <br/>
        <span class="required" id="venue_txt">*Venue: </span><input type="text" size="45" value="" name="venue" />
        Telephone: <input type="text" value="" name="tel" />
        <br/>
        URL: <input type="text" size="100" value="" name="url" />
        <br/><br/>
        Address: <input type="text" size="45" value="" name="address" />
        &nbsp;&nbsp;
        <span class="required" id="city_txt">*City: </span><input type="text" value="" name="city" />
        <br/>
        State: <input type="text" value="" name="state" />
        ZIP: <input type="text" value="" name="zip" />
        <span id="country_txt">*Country: </span><input type="text" value="United States" name="country" />
        <br/>
        <br/>Comments: <br/>
        <textarea cols="80" rows="8" name="comments" ></textarea>
    </div>
    <!-- START OF:commands  -->
    <div id="commands" >
        <button name="edit" id="edit" >Edit</button> 
        <button name="delete" id="delete" >Delete</button>
    <br />
    <hr />
    <br />
    </div>
    <!-- END OF:commands  -->
</div>
<!-- END OF:new -->

添加了新的 cmets，2011 年 11 月 3 日：

好的，我发现了问题，我的 jQuery 出现了错误。现在，当我添加 .clone(true) 时，几乎一切正常。

我的新问题是 UI 日期选择器。 克隆 HTML 后，当我单击新克隆的日期字段时，焦点转到从中克隆数据的（旧）日期字段。此外，如果我选择一个日期，该值会转到旧的日期字段 - 而不是新克隆的日期字段。

这是我的 ajax 代码（提交成功后）：

UI 日期选择器代码：

$("input[name='date']").datepicker( dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true);

阿贾克斯：

    ...ajax code...
function(data)

var $msg = eval(data);
if( $msg[0] == 1 )
    
    //#var.new
        $id = '#'+$msg[1];
        $data = $("#new");
    $new = $data.clone(true);
    $new.find('input.datefield').datepicker();


        $new.attr("id", $id);
        $new.children('[name="id"]').val($id);
        $new.children('[name="id"]').attr("value", $id);
        $new.children(":input").each(function()  var $value = $(this).val(); $(this).attr("value", $value); );
        $new.prepend( "<br/>" );

        $commands = $("#blank").children("#commands").clone(true);
        $commands.children("#add").text("Update");
        $commands.children("#add").attr("pk", $id);
        $commands.children("#add").attr("name", "update");
        $commands.children("#add").attr("id", "update");

        $commands.children("#reset").text("Delete");
        $commands.children("#reset").attr("pk", $id);
        $commands.children("#reset").attr("name", "delete");
        $commands.children("#reset").attr("id", "delete");

        $new.append( $commands );

        //#animation
        //blank.slideUp
        $("#blank").slideUp(2500, function()
        $("#ADDNEW").html("&#9658; New:");
        //$("#blank").clone().prependTo( $("#active") );
        //$("#blank").prependTo( "#active" );

        //active.slideUp
        $("#active").slideUp("slow", function()
        $("#ON").html("&#9658; Active:");
        $("#active").prepend( $new );
        $('#reset').trigger('click');

        //active.slideDown
        $("#active").slideDown(8500, function()
        $("#ON").html("&#9660; Active:");

        //blank.slideDown
        $("#blank").slideDown(3500, function()
        $("#ADDNEW").html("&#9660; New:");
        load_bar(0);

        ); //end: anumation.#blank.slideDown
        ); //end: anumation.#active.slideDown
        ); //end: anumation.#blank.slideUp
        ); //end: anumation.#active.slideUp

        //$("#new").fadeOut(2000, function()
        //START: blank
        //alert( $("#blank").html() );
        //$dad = $("#new");
        //$dad.children('input[name!="id"][name!="country"], textarea').val('');
        //$dad.children('[name="country"]').val("United States");
        //$dad.children('[name="date"]').focus();
        //END: blank
        //$("#new").fadeIn(2000, function()
        //alert( $msg );
        //); //end: anumation.fadeIn
        //); //end: anumation.fadeOut
         //end: if
    else
        
        //var varMSG = data;
        //alert( "Hello" );
        alert( $msg );

        //$("#add").attr("disabled", false);
        //$("#reset").attr("disabled", false);
        load_bar(0);
         //end: if.else
    //end: $.post.function
); //END:$.post
); 
//END:ajax

【问题讨论】：

你能发布一些示例 javascript 吗？

上面的HTML是替换页面上已经存在的内容，还是添加到页面上？因为如果您要添加具有相同 ID 的其他副本（例如，按钮上的 id="edit"），任何使用元素 ID 的 JS 都将无法正常工作。请出示你的 JS。

“不再工作”是什么意思？

【参考方案1】：

您好，我有一个类似的用例，我有一些动态生成的内容，其中包含一个按钮，点击事件响应原始按钮而不是生成的按钮， 我以前做过：

$('.someclass').on('click', function() 

但我通过这样的 live 替换 on 解决了我的问题：

$('.someclass').live('click', function() 

【讨论】：

太棒了！ .live 方法对我有用。我正在尝试.clone(true)，但不知道如何或在哪里。谢谢！

请注意，.live() 自 jQuery 1.7 版起已被弃用。参考：api.jquery.com/live

【参考方案2】：

我终于让 UI 日期选择器正常工作了。我必须在克隆之前完全删除 datepicker 并在克隆元素之后添加它。 UI 的人应该让我们更容易。算了！

就在克隆之前：

//#datepicker
$("input[name='date']").datepicker( "destroy" );
$("input[name='date']").removeClass("hasDatepicker").removeAttr('id');

克隆后：

$("input[name='date']").datepicker( dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true);

【参考方案3】：

如果您的处理程序是使用类似的设置 $('.class').click( ... )

试试这样的方法： $('.class').live('click', ...)

Live 适用于类可能尚不存在的元素。

【参考方案4】：

.clone( true ) 可以解决问题。

文档：http://api.jquery.com/clone/

【讨论】：

我使用了 .clone( true ) 但它仍然无法正常工作。 span 元素应该根据输入的变化改变颜色（切换类 .required）。然而，他们没有。

@Omar 你能发布克隆和附加这些元素的 JavaScript 代码吗？

从他的问题看来，他应该选择clone(true, true)。

@missingno true 不需要两次，因为第二个参数的值默认匹配第一个参数的值...