鏈式方法調用不適用於原始或克隆的元素，爲什麼？

Question

我有以下HTML：

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

然後看看下面的jQuery：

$(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'); 
    }); 
}); 

你可以試試上面HERE的代碼。

現在只要您點擊#showme您應該刪除attr樣式，用給定的元素替換原始元素並將其轉換爲Select2，最後一部分不起作用。

另一方面，如果你點擊#clickme你應該銷燬前面的Select2，用克隆的元素替換#condition_value_1，並刪除attr樣式，因爲克隆有該屬性，但這也不起作用。

這個想法是在元素之間切換，並根據需要打開/關閉屬性。

也許我在這裏失去了一些東西，但我不知道是什麼。有任何幫助我嗎？

Answer 1

的問題是，replaceWith返回去除元素，而不是新的元素。我建議一個不同的路徑：

$(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'); 
    }); 
}); 

請注意，我已經刪除了克隆中的屬性，之前更換任何東西;這樣，你不必擔心它。

請注意，在showme點擊處理程序中，我們替換HTML，然後獲得一個新的掛鉤到$("#condition_value_1")。這是因爲cond1不再位於DOM中，因爲您已將其替換爲第一行中的HTML。

同樣，在clickme點擊處理程序中，您需要重置值cond1以匹配您的新HTML。

Answer 2

Updated fiddle。

我建議使用容器，然後追加你想要的元素，查看下面的例子。

希望這會有所幫助。

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