jQuery: các yếu tố và các sự kiện bản sao

Question

Bất cứ khi nào tôi sử dụng ajax để tự động tạo ra nội dung mới, .clone(), nối thêm() vv, yếu tố mới thua bất kỳ trigger và các sự kiện tôi được lập trình = (

Sau khi thực hiện sao chép, đơn giản những thứ LÀM VIỆC trên các yếu tố khác như thêm lớp vào, trên các phần tử sao chép không còn hoạt động nữa. Bất kỳ nội dung ajax mới nào cũng không hoạt động, tôi có thể làm gì? các nút lệnh không còn hoạt động nữa. Tạo kiểu cho các phần tử span không còn hoạt động trên các phần tử 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 --> 

ý kiến ​​mới được thêm vào, 11/03/2011:

OK, tôi đã tìm ra vấn đề và tôi đã có một lỗi trên jQuery tôi. Bây giờ, khi tôi thêm .clone (true) ALMOST mọi thứ hoạt động.

Vấn đề mới của tôi là trình chỉnh sửa ngày của giao diện người dùng. Sau khi sao chép mã HTML, khi tôi nhấp vào trường ngày mới được nhân bản, tiêu điểm sẽ chuyển đến trường dữ liệu (cũ) mà dữ liệu được sao chép từ đó. Hơn nữa, nếu tôi chọn một ngày, giá trị sẽ chuyển đến trường ngày cũ -Không phải là trường dữ liệu mới được nhân bản.

Đây là mã của tôi ajax (Sau một submition thành công):

UI đang datepicker:

$("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 

Answer 1

.clone(true) hiện các trick. (' Lớp. ') http://api.jquery.com/clone/

Answer 2

Nếu xử lý của bạn được thiết lập sử dụng một cái gì đó giống như $ nhấp (...)

Hãy thử một cái gì đó như thế này thay vì::

Documentation. $ (' lớp. ') .live (' click ', ...)

Trực tiếp áp dụng cho các phần tử có lớp chưa tồn tại.

Answer 3

Cuối cùng tôi đã nhận được datepicker UI hoạt động bình thường. Tôi đã phải hoàn toàn loại bỏ datepicker TRƯỚC KHI nhân bản và thêm nó sau khi nhân bản nhân tố. Những người ở giao diện người dùng nên giúp chúng tôi dễ dàng hơn. Đi con số!

Ngay trước khi nhân bản:

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

Sau khi sao chép:

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

Answer 4

Hi Tôi đang gặp một trường hợp sử dụng chút tương tự, tôi có một số nội dung tự động tạo ra có chứa một nút , sự kiện nhấp đang phản hồi nút gốc nhưng không phải là sự kiện được tạo, Tôi đã thực hiện trước:

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

nhưng tôi giải quyết vấn đề của tôi bằng cách thay thế vào bằng cách sống như thế này:

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