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()返回原始 jQuery对象，当你替换它们时，它们现在不包含任何元素。

在你的逻辑结构中，这意味着你不能从这些元素链接，需要在附加元素上启动调用，如下所示：

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

如果您执行以下操作：

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

replaceWith方法返回的对象是原始对象集。这是因为它们可能被替换，但它们仍然存在。也许不是在DOM中，而是在它之外。因此，您可能希望在更换后使用它做其他事情。

因此，您需要进行单独的Javascript调用，选择正确的元素并调用removeAttr和select2函数。

与大多数jQuery方法一样，.replaceWith（）方法返回jQuery对象，以便可以将其他方法链接到它上面。但是，必须注意返回原始jQuery对象。此对象引用已从DOM中删除的元素，而不是已替换它的新元素。

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

链式方法调用不适用于原始元素还是克隆元素？

2 个答案: