链式方法调用对原始元素和克隆元素都不起作用，为什么?

Chained method calls doesn't work on original nor cloned element, why?

本文关键字：元素 不起作用 为什么 方法 调用 原始      更新时间：2023-09-26

我有以下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');
  });
});

您可以尝试上面的代码这里。

现在只要你点击#showme，你应该删除attr样式，将原始元素替换为给定的元素，并将其转换为Select2，最后一部分不起作用。

在另一边，如果你点击#clickme，你应该破坏之前的Select2，用克隆元素替换#condition_value_1，并删除attr样式，因为克隆的具有该属性，但这也不起作用。

这个想法是在元素之间切换，并根据需要打开/关闭属性。

也许我在这里错过了什么，但我不确定是什么。有人能帮我吗?

更新小提琴。

我建议使用一个容器，然后附加你想要的元素，检查下面的例子。

希望对你有帮助。

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

问题是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。

相关文章：