Javascript jQuery：克隆元素和事件

每当我使用ajax动态创建新内容、.clone（）、append（）等时，新元素就会释放我编程的所有触发器和事件=(

复制完成后，对其他元素有效的简单操作，如在复制的元素上添加类，将不再有效。任何新的ajax内容都不起作用。命令按钮不再有效。我该怎么办

我正在克隆此HTML，并且命令按钮不再起作用。设置span元素的样式在克隆的元素上不再起作用：

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

阿贾克斯：

…ajax代码。。。
功能（数据）
{
var$msg=eval（数据）；
如果（$msg[0]==1）
{
//#新变种
$id='#'+$msg[1]；
$data=$（“#新”）；
$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（“
”）；
$commands=$（“#blank”）.children（“#commands”）.clone（true）；
$commands.children（#add”）.text（“更新”）；
$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）；
//#动画
//blank.slideUp
$（“#空白”）.slideUp（2500，函数（）{
$（“#ADDNEW”）.html（►；New:”；
//$（“#blank”）.clone（）.prependTo（$（“#active”）；
//$（“#空白”）.prependTo（“#活动”）；
//active.slideUp
$（“#活动”）.slideUp（“慢速”，函数（）{
$（“#ON”）.html（►；活动：）；
$（“#活动”）。预编（$新）；
$（'#reset'）。触发器（'click'）；
//活动。向下滑动
$（“#活动”）。向下滑动（8500，函数（）{
$（“#ON”）.html（▼；活动：）；
//blank.slideDown
$（“#空白”）。向下滑动（3500，函数（）{
$（“#ADDNEW”）.html（▼；New:”；
负载_巴（0）；
})//结束：anumation.#blank.slideDown
})；//结束：anumation.#active.slideDown
})//结束：anumation.#blank.slideUp
})//结束：anumation.#active.slideUp
//$（“#新”）。淡出（2000年，函数（）{
//开始：空白
//警报（$（“#blank”）.html（）；
//$dad=$（“#新”）；
//$dad.children（'input[name！=“id”][name！=“country”]，textarea'）.val（“”）；
//$dad.children（'[name=“country”]'）.val（“美国”）；
//$dad.children（'[name=“date”]'）.focus（）；
//完:空白
//$（“#新”）.fadeIn（2000年，函数（）{
//警报（$msg）；
//})；//结束：anumation.fadeIn
//})；//结束：anumation.fadeOut
}//结束：如果
其他的
{
//var varMSG=数据；
//警惕（“你好”）；
警报（$msg）；
//$（“添加”）.attr（“禁用”，false）；
//$（“重置”）.attr（“禁用”，false）；
负载_巴（0）；
}//结束：if.else
}//结束：$.post.function
); //完:$邮政编码
}); 
//结束：ajax

.clone（true）

起作用

---

文档：

如果您的处理程序是使用 $（'.class'）。单击（…）

请尝试以下方法： $（'.class'）.live（'单击'，…）

---

Live应用于类可能还不存在的元素。

我终于让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});

克隆后：

//#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});

---

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

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

但我解决了我的问题，用live替换了on，如下所示：

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

---

我使用了.clone（true），但它仍然不起作用。span元素应该根据输入的更改更改颜色（toggle class.required）。但是，他们没有。@Omar你能发布克隆并附加这些元素的JavaScript代码吗？听他的问题，看起来他应该选择

clone（true，true）

。@missingno

true

不需要两次，由于默认情况下第二个参数的值与第一个参数的值匹配……您可以发布一些示例javascript吗？上面的HTML是替换页面上已经存在的内容，还是添加到页面上？因为如果要添加具有相同id的其他副本（例如，按钮上的

id=“edit”

），则任何使用元素id的JS都无法正常工作。请出示你的JS。“不再工作”是什么意思？太棒了！

.live

方法对我很有效。我正在尝试

.clone（true）

，但不知道如何或在哪里。谢谢请注意，

.live（）

自jQuery 1.7版以来一直被弃用。裁判：