jQuery的：克隆元素和事件

Question

每當我使用AJAX來動態地創建新的內容，.clone（），追加（）等新元素失去我編程=（

製作副本後所有觸發器和事件，簡單那些在其他元素上工作的東西，比如添加一個類，在複製的元素上不再起作用，任何新的ajax內容都不起作用，命令按鈕不再起作用，我能做什麼？我能做些什麼？

我克隆了這個HTML，命令按鈕不再起作用。對CLONED元素不再起作用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 --> 

新添加註釋，11/03/2011：

OK，我想通了這個問題，我在我的jQuery有一個錯誤。現在，當我添加.clone（true）幾乎一切正常。

我的新問題是UI日期選擇器。 克隆HTML後，當我點擊新克隆的日期字段時，焦點將轉到數據克隆的（舊）日期字段。更重要的是，如果我選擇日期，則該值將轉到舊的日期字段 - 不是新克隆的日期字段。

這裏是我的Ajax代碼（成功submition後）：

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 

Answer 1

.clone(true)的伎倆。

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

Answer 2

如果您的處理器使用的是類似 $設置（」一流 '）點擊（...）

嘗試這樣的事情，而不是：。 $（' 類'）.live（'click'，...）

Live適用於可能還不存在的類的元素。

Answer 3

我終於得到了UI日期選擇器正常工作。我必須徹底刪除datepicker之前的克隆，並添加它克隆元素後。用戶界面的人應該讓我們更容易。去搞清楚！

就克隆前：

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

Answer 4

嗨，我是有一點類似用途的情況下，我有一個包含一個按鈕一些動態生成的內容，點擊事件響應原始按鈕但不是生成的按鈕， 我之前完成的：

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

，但我決心通過關於更換由現場像這樣我的問題：

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