jQuery: क्लोन तत्वों और घटनाओं

Question

जब भी मैं ajax का उपयोग गतिशील रूप से नई सामग्री, .clone() बनाने के लिए, संलग्न() आदि, नए तत्व किसी भी चलाता और घटनाओं मैं = (

क्रमादेशित प्रतिलिपि बनाने के बाद खो देता है, सरल चीजें जो कॉपी किए गए तत्वों पर कक्षा जोड़ने जैसे अन्य तत्वों पर काम करती हैं, अब काम नहीं करती हैं। कोई भी नई AJAX सामग्री काम नहीं करती है। कमांड बटन अब काम नहीं करते हैं।

मैं इस HTML को क्लोन कर रहा हूं, और कमांड बटन अब काम नहीं करते हैं। अवधि तत्वों को स्टाइल करना अब क्लोन किए गए तत्वों पर काम नहीं करता है:

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

नई टिप्पणियाँ कहा, 2011/11/03:

ठीक है, मैं समस्या समझ और मैं अपने jQuery पर एक त्रुटि थी। अब, जब मैं .clone (सच) जोड़ता हूं सब कुछ सब कुछ काम करता है।

मेरी नई समस्या यूआई डेटपिकर है। एचटीएमएल क्लोन करने के बाद, जब मैं नए क्लोन डेट फील्ड पर क्लिक करता हूं, तो फोकस उस पुराने (पुराने) डेटफील्ड पर जाता है जिस पर डेटा क्लोन किया गया था। अधिक, अगर मैं कोई तारीख चुनता हूं, तो मूल्य पुराने डेटफील्ड पर जाता है-नए क्लोन डेटफील्ड को नहीं।

यूआई datepicker कोड:

$("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) काम कर देता है

यहाँ मेरी ajax कोड (एक सफल submition के बाद) है।

प्रलेखन: http://api.jquery.com/clone/

Answer 2

अपने संचालकों सेटअप $ की तरह कुछ प्रयोग कर रहे हैं ('। क्लास') पर क्लिक करें (...)

की तरह इस के बजाय कुछ का प्रयास करें:।। $ ('वर्ग ')। लाइव (' क्लिक करें ', ...)

लाइव कक्षा के साथ तत्वों पर लागू होता है जो अभी तक मौजूद नहीं हैं।

Answer 3

मुझे अंततः यूआई डेटपिकर को ठीक से काम करने के लिए मिला। मुझे क्लोनिंग से पहले डेटपिकर को पूरी तरह से हटा देना था और क्लोनिंग तत्वों के बाद इसे जोड़ना था। यूआई के लोगों को हमारे लिए यह आसान बनाना चाहिए। जाओ पता लगाओ!

बस क्लोनिंग से पहले:

//#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() {