Verkettete Methodenaufrufe funktionieren nicht mit dem ursprünglichen oder geklonten Element, warum?

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 versuchen oben HERE.

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 die #condition_value_1 mit dem geklonten Element zerstören ersetzen und den attr Stil entfernen, weil das geklonte dieses Attribut hat aber das funktioniert 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?

Answer 1

Das Problem ist, dass replaceWith das Element entfernt zurückkommt, nicht das neue Element. Ich schlage vor, einen anderen Weg:

$(function() { 
    var cond1 = $('#condition_value_1'); 
    var cloned_cond1 = cond1.clone().removeAttr('style'); 
    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' 
    }); 
    cond1 = $("#condition_value_1"); 
    }); 

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

    $('#condition_value_1').replaceWith(cloned_cond1); 
    cond1 = $('#condition_value_1'); 
    }); 
}); 

Bitte beachte, dass ich das Attribut aus dem Klon entfernt haben, bevor überhaupt irgendetwas zu ersetzen; Auf diese Weise musst du dir keine Sorgen machen.

Hinweis auch in der showme Click-Handler, ersetzen wir den HTML-Code, dann erhalten Sie einen neuen Hook zu $("#condition_value_1"). Das liegt daran, dass cond1 nicht mehr im DOM enthalten ist, da Sie es durch das HTML in der ersten Zeile ersetzt haben.

Entsprechend müssen Sie im clickme Click-Handler den Wert cond1 auf Ihren neuen HTML-Code zurücksetzen.

Answer 2

Updated fiddle.

Ich empfehle, einen Container zu verwenden, dann fügen Sie das gewünschte Element hinzu, überprüfen Sie das Beispiel unten.

Hoffe, das hilft.

$(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() { 
 
    $("#my-container").html(cond1_select); 
 
    $("#condition_value_1").select2({placeholder: 'Select choice',width:'100%'}); 
 
    }); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> 
 

 
<div id="my-container"> 
 
    <input type="text" id="condition_value_1" name="condition_1" style="display: none" /> 
 
</div> 
 

 
<button id="showme">Make Select2</button> 
 
<button id="clickme">Make Input</button>