Verkettete Methodenaufrufe funktionieren nicht für das ursprüngliche oder geklonte Element?

Question

Ich habe folgende HTML:

<input type="text" id="condition_value_1" style="display: none" />  
<button id="showme">Make Select2</button> 
<button id="clickme">Make Input</button> 

Dann einen Blick auf die folgende jQuery nehmen:

$(function() { 
    var cond1 = $('#condition_value_1'); 
    var cloned_cond1 = cond1.clone(); 
    var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>'; 

    $('#showme').click(function() { 
    cond1.removeAttr('style').replaceWith(cond1_select).select2({ 
     placeholder: 'Select choice' 
    }); 

    }); 

    $('#clickme').click(function() { 
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) { 
     $("#condition_value_1").select2('destroy'); 
    } 

    $('#condition_value_1').replaceWith(cloned_cond1).removeAttr('style'); 
    }); 
}); 

Sie können den Code oben here versuchen.

Jetzt, sobald Sie auf #showme klicken, sollten Sie den Attr Stil entfernen, ersetzen Sie das ursprüngliche Element mit dem gegebenen und drehen Sie es in ein Select2, der letzte Teil funktioniert nicht.

In der anderen Seite, wenn Sie auf #clickme klicken, sollten Sie die vorherige Select2 zerstören die #condition_value_1 mit dem geklonten Element ersetzen und entfernen Sie die Attr-Stil, weil die geklonte hat dieses Attribut, aber das funktioniert auch nicht.

Die Idee besteht darin, zwischen den Elementen zu wechseln und die Eigenschaften bei Bedarf ein- und auszuschalten.

Vielleicht fehlt mir hier etwas, aber ich bin mir nicht sicher was. Kann mir hier etwas helfen?

Hinweis: Ich habe meinen vorherigen Beitrag gelöscht, um Verwirrungen zu vermeiden, Entschuldigung dafür!

Answer 1

Das Problem ist, weil replaceWith() das Original jQuery-Objekt zurückgibt, die nun keine Elemente enthält, wie Sie sie ersetzt.

In Ihrer Logikstruktur bedeutet dies, man kann nicht Kette aus diesen Elementen und müssen Anrufe auf die beigefügten Elemente beginnen, wie folgt aus:

var $cond1 = $('#condition_value_1'); 
var $cloned_cond1 = cond1.clone(); 
var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>'; 

$('#showme').click(function() { 
    $cond1.replaceWith(cond1_select); 
    $('#condition_value_1').select2({ 
     placeholder: 'Select choice' 
    }); 
}); 

$('#clickme').click(function() { 
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) { 
     $("#condition_value_1").select2('destroy'); 
    } 

    $('#condition_value_1').replaceWith($cloned_cond1); 
    $cloned_cond1.removeAttr('style'); 
}); 

Answer 2

Wenn Sie Folgendes tun:

$("#div").replaceWith(".item2") 

Das von der replaceWith-Methode zurückgegebene Objekt ist der ursprüngliche Objektsatz. Dies, weil sie möglicherweise ersetzt werden, aber sie existieren noch. Vielleicht nicht im DOM, aber außerhalb davon. Vielleicht möchten Sie nach dem Austausch etwas anderes damit machen.

Dafür müssen Sie einen separaten Javascript Aufruf machen, wo Sie das richtige Element auswählen und die removeAttr und select2 Funktion aufrufen.

Die .replaceWith() -Methode gibt, wie die meisten jQuery-Methoden, das jQuery-Objekt zurück, so dass andere Methoden darauf verkettet werden können. Jedoch muss beachtet werden, dass das ursprüngliche jQuery-Objekt zurückgegeben wird. Dieses Objekt verweist auf das Element, das aus dem DOM entfernt wurde, und nicht auf das neue Element, das es ersetzt hat.

http://api.jquery.com/replacewith/