链式方法调用不适用于原始元素或克隆元素，为什么? [英] 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返回的是已删除的元素，而不是new元素.我建议使用另一条路径:

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，然后获得了一个新的$("#condition_value_1")钩子.这是因为cond1不再在DOM中，因为您已经在第一行中将其替换为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屋！