jQuery: klon elemanları VE olaylar

Question

Dinamik, .clone() yeni içerik oluşturmak için ajax her kullandığınızda, ekleme() vb, yeni eleman basit, ben kopya yaptıktan sonra = (

programlanmış tetikleri ve olayları kaybeder Kopyalanan öğelere artık bir sınıf eklemek gibi diğer öğeler üzerinde çalışılan şeyler artık işe yaramaz.Yeni bir ajax içeriği çalışmaz .. Komut düğmeleri artık işe yaramaz Ne yapabilirim?

Bu HTML'yi klonladım ve komut düğmelerinin artık çalışmasına izin verilmiyor. CLONED öğelerinde artık çalışmayan elemanların şekillendirilmesi artık kullanılamıyor:

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

Yeni yorumlar, 11/03/2011 ekledi:

Tamam, sorunun ne ve benim jQuery bir hata vardı. Şimdi, eklediğimde .clone (true) ALMOST her şey çalışıyor.

Yeni sorunum UI datepicker'tır. HTML'yi klonladıktan sonra, yeni klonlanan tarih alanına tıkladığımda, odak, verilerin klonlandığı (eski) tarih alanına gider. Daha fazla, bir tarih seçtiğimde, değer eski tarih alanına gider - Yeni klonlanmış tarih alanı değil.

UI datepicker kodu:

$("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) hile yok

İşte (Başarılı submition sonra) benim ajax kodudur.

Dokümantasyon: http://api.jquery.com/clone/

Answer 2

sizin işleyicileri kurulum $ gibi bir şey kullanıyorsanız ('. Sınıf ') tıklayın (...)

artık şöyle bir şey deneyin:.. ( $' sınıfı ') .live (' click ', ...)

Canlı, henüz bulunmayan sınıf öğelerine uygulanır.

Answer 3

Sonunda düzgün çalışması için kullanıcı arabirimi tarihçisini aldım. Klonlamadan ÖNCE tarih seçicisini tamamen kaldırmak zorunda kaldım ve Klonlama sonrası AFTER öğeleri ekledim. UI'deki adamlar bizim için daha kolay olmalı. Git rakam!

Sadece klonlama önce:

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

klonlama sonra:

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

Answer 4

Merhaba ben biraz benzer kullanım durumunda yaşıyorum, ben bir düğme içeren bazı dinamik olarak oluşturulmuş içeriğe sahip , click olayı orijinal düğmeye yanıt veriyor ama daha önce yaptığım oluşturulmuş bir değil:

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

ama ben böyle canlı tarafından yerine sorunumu çözüldü:

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