jQuery的：克隆元素和事件 [英] jQuery: clone elements AND events

查看：194
本文介绍了jQuery的：克隆元素和事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

每当我使用Ajax动态创建新内容，.clone（），追加（）等新元素失去我编程=（

的触发器和事件

制作副本，简单的事情，像添加一个类，在复制的元素不再工作等元素后做事。任何新的Ajax内容不工作。命令按钮不再起作用。我该怎么办？

我复制此HTML和命令按钮不再起作用。造型跨度元素不再在克隆的元素工作：

 ＆LT; div名称=显示ID =X＆GT;＆LT; BR /＆GT; ＆LT;  - ！此ID取决于数据库 - ＆GT;
    ＆LT; div名称=显示ID =X＆GT;
        编号：LT;输入禁用=禁用大小=7价值=的XNAME =ID/＆GT;
        状态：
        ＆LT;选择名称=状态＆GT;
          ＆LT;选项选择=选择＆GT;显示与LT; /选项＆GT;
          ＆LT;选项＆GT;隐藏＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
        ＆LT; BR /＆GT;＆LT; BR /＆GT;
        ＆LT;跨度类=必需的ID =date_txt＆GT; *日期：＆LT; / SPAN＆GT;＆LT;输入类型=文本值=NAME =日期/＆GT;
        ＆安培; NBSP;＆安培; NBSP;
        ＆LT;跨度类=必需的ID =的title_txt＆GT; *标题：＆LT; / SPAN＆GT;＆LT;输入类型=文字大小=65值=NAME =头衔/＆GT;
        ＆LT; BR /＆GT;
        ＆LT;跨度类=必需的ID =venue_txt＆GT; *地点：＆LT; / SPAN＆GT;＆LT;输入类型=文字大小=45值=NAME =场地/＆GT;
        电话：LT;输入类型=文本值=NAME =电话/＆GT;
        ＆LT; BR /＆GT;
        网址：＆LT;输入类型=文字大小=100值=NAME =URL/＆GT;
        ＆LT; BR /＆GT;＆LT; BR /＆GT;
        地址：＆LT;输入类型=文字大小=45值=NAME =地址/＆GT;
        ＆安培; NBSP;＆安培; NBSP;
        ＆LT;跨度类=必需的ID =city_txt＆GT; *城市：其中; / SPAN＆GT;＆LT;输入类型=文本值=NAME =城市/＆GT;
        ＆LT; BR /＆GT;
        状态：其中，INPUT TYPE =文本值=NAME =状态/＆GT;
        ZIP：＆LT;输入类型=文本值=NAME =拉链/＆GT;
        ＆LT;跨度ID =country_txt＆GT; *国家：＆LT; / SPAN＆GT;＆LT;输入类型=文本值=美国NAME =国家/＆GT;
        ＆LT; BR /＆GT;
        ＆LT; BR /＆GT;注释：其中; BR /＆GT;
        ＆LT; textarea的COLS =80行=8NAME =意见＆GT;＆LT; / textarea的＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;  - 开始时间：！命令 - ＆GT;
    ＆LT; D​​IV ID =命令＆GT;
        ＆LT;按钮名称=编辑ID =编辑＆gt;编辑＆LT; /按钮＆GT;
        ＆LT;按钮名称=删除ID =删除＆GT;删除＆LT; /按钮＆GT;
    ＆LT; BR /＆GT;
    ＆LT;小时/＆GT;
    ＆LT; BR /＆GT;
    ＆LT; / DIV＆GT;
    ！＆LT;  - 结束：命令 - ＆GT;
＆LT; / DIV＆GT;
＆LT;  - 结束：！新 - ＆GT;

新添加注释，11/03/2011：


好吧，我想通了这个问题，我在我的jQuery有一个错误。现在，当我添加.clone（真）几乎所有的工作。



我的新问题是UI日期选择器。
克隆HTML之后，当我点击新克隆的日期字段，焦点转到（旧）的DateField数据被克隆。更过，如果我选择一个日期，该值往旧的DateField - 不是新克隆的DateField。

下面是我的ajax code（成功后submition）：

UI日期选择器code：

  $（输入[名称='日期']）日期选择器（{日期格式：YY-MM-DD'，changeMonth：真的，changeYear：真的，NUMBEROFMONTHS：3 ，showButtonPanel：真}）;

阿贾克斯：

  ... AJAX code ...
功能（数据）
{
变量$味精=的eval（数据）;
如果（$味精[0] == 1）
    {
    //#var.new
        的$ id ='＃'+ $味精[1];
        $数据= $（＃新）;
    $新= $ data.clone（真）;
    $ new.find（'input.datefield'）日期选择器（）。
        $ new.attr（ID，$ id）的;
        $ new.children（'[NAME =ID]）VAL（$ ID）。
        $ new.children（'[NAME =ID]'）ATTR（价值，$ id）的。
        。$ new.children（：输入），每个（函数（）{VAR $值= $（本）.VAL（）; $（本）.attr（价值，$值）;}）;
        。$新的prePEND（＆LT; BR /＆gt;中）;        $命令= $（＃空白），儿童（＃指令）的克隆（真）。;
        $ commands.children（＃增）文本（更新）。
        $ commands.children（＃增）ATTR（PK，$ id）的。
        $ commands.children（＃增）ATTR（名，更新）。
        $ commands.children（＃增）ATTR（ID，更新）。        $ commands.children（＃重设）文本（删除）。
        $ commands.children（＃复位），ATTR（PK，$ id）的。
        $ commands.children（＃复位），ATTR（名，删除）。
        $ commands.children（＃复位），ATTR（ID，删除）。        $ new.append（$命令）;        //＃动画
        //blank.slideUp
        $（＃空白）。效果基本show（2500，函数（）{
        $（＃ADDNEW）HTML。（与＆amp;＃9658;新：）;
        。// $（＃空白）的clone（）prependTo（$（＃激活））;
        // $（＃空白）prependTo（#active）;        //active.slideUp
        $（＃活动）。效果基本show（慢，函数（）{
        $（＃ON）HTML（与＆amp;＃9658;活动：）;
        $（＃激活）prePEND（$新）;
        $（'＃复位'）的触发器（点击）。        //active.slideDown
        $（＃活动）。了slideDown（8500，函数（）{
        $（＃ON）HTML（与＆amp;＃9660;活动：）;        //blank.slideDown
        $（＃空白）。了slideDown（3500，函数（）{
        $（＃ADDNEW）HTML。（与＆amp;＃9660;新：）;
        load_bar（0）;        }）; //结束：anumation＃blank.slideDown
        }）; //结束：anumation＃active.slideDown
        }）; //结束：anumation＃blank.slideUp
        }）; //结束：anumation＃active.slideUp        //$(\"#new\").fadeOut(2000，函数（）{
        //开始：空白
        //警报（$（＃空白）HTML（））;
        // $爸爸= $（＃新）;
        //$dad.children('input[name!=\"id\"][name!=\"country]，文本区域）。VAL（''）;
        //$dad.children('[name=\"country\"]').val(\"United国家）;
        // $ dad.children（'[NAME =日期]）专注（）;
        // END：空白
        //$(\"#new\").fadeIn(2000，函数（）{
        //警报（$味精）;
        //}）; //结束：anumation.fadeIn
        //}）; //结束：anumation.fadeOut
        } //万一
    其他
        {
        // VAR varMSG =数据;
        //警报（你好）;
        警报（$味精）;        //$(\"#add\").attr(\"disabled，FALSE）;
        //$(\"#reset\").attr(\"disabled，FALSE）;
        load_bar（0）;
        } //结束：if.else
    } //结束：$ .post.function
）; //END:$.post
}）;
// END：阿贾克斯


解决方案

.clone（真）的伎俩。

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

Whenever I use ajax to dynamically create new content, .clone(), append() etc, the new element looses any triggers and events I programmed =(

After making copy, simple things that WORK on other elements like adding a class to , on the copied elements no longer work. Any new ajax content does not work. Command buttons no longer work. What can I do?

I am cloning this HTML, and the command buttons no longer work. Styling the span elements no longer work on the CLONED elements:

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

New comments added, 11/03/2011:

OK, I figured out the problem and I had an error on my jQuery. Now, when I add .clone( true ) ALMOST everything works.


My new problem is the UI datepicker. After cloning the HTML, when I click on the newly cloned date field, the focus goes to the (old) datefield the data was cloned from. More over, if I select a date, the value goes to the old datefield -Not the newly cloned datefield.

Here is my ajax code (After a successful submition):

UI datepicker code:

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

Ajax:

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

解决方案

.clone( true ) does the trick.

Documentation: http://api.jquery.com/clone/

这篇关于jQuery的：克隆元素和事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆