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

问题描述

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

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

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?

注意：我删除了我以前的帖子，以避免混淆，对此表示歉意！

Note: I've deleted my previous post to avoid confusions, apologies about that!

推荐答案

问题是因为 replaceWith（）原始的 jQuery对象，现在不需要替换元素。

The problem is because replaceWith() returns the original jQuery object which now contains no elements as you replaced them.

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

In your logic structure this means you can't chain from those elements and need to start calls on the appended elements, like this:

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

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