链接方法调用在原始或克隆元素上不起作用，为什么？ [英] Chained method calls doesn't work on original nor cloned element, why?

问题描述

我有以下HTML：

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

然后查看以下jQuery：

Then take a look to the following 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 。

You can try the code above HERE.

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

Now as soon as you click on #showme you should remove the attr style, replace the original element with the given one and turn it into a Select2, the last part isn't working.

另一方面，如果您点击 #clickme 您应该销毁以前的Select2用克隆的元素替换＃condition_value_1 ，并删除attr样式，因为克隆的属性具有该属性，但这也不起作用。

In the other side if you click on #clickme you should destroy the previous Select2 replace the #condition_value_1 with the cloned element and remove the attr style because the cloned has that attribute but this is not working either.

想法是在元素之间切换，按需打开/关闭属性。

The idea is to switch between elements and turn on/off properties on demand.

也许我没有这里的东西，但我不知道什么。可以帮助我吗？

Maybe I am missing something here but I am not sure what. Could any help me here?

推荐答案

问题是 replaceWith return 元素删除，而不是新元素。我建议不同的路径：

The problem is that replaceWith returns the removed element, not the new element. I suggest a different path:

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

请注意，在更换任何内容之前，我已经从克隆中删除了该属性;那样就不用担心了。

Note that I've removed the attribute from the clone before ever replacing anything; that way, you don't have to worry about it.

另请参见 showme 点击处理程序，我们替换HTML，然后获取一个新的钩子到$ $ C> $（ ＃condition_value_1）。这是因为您已经在DOM中替换了 cond1 ，因为您已经将其替换为第一行中的HTML。

Note also in the showme click handler, we replace the HTML, then get a new hook to $("#condition_value_1"). That's because cond1 is no longer in the DOM, since you've replaced it with the HTML in the first line.

同样，在 clickme 点击处理程序中，您需要重置 cond1 的值以匹配您的新HTML。

Likewise, in the clickme click handler, you need to reset the value of cond1 to match your new HTML.

这篇关于链接方法调用在原始或克隆元素上不起作用，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！