Jquery live() 和 clone() 的 1.10 组合 - 奇怪的行为

Question

我想克隆一个元素并插入 DOM 中的另一个位置。（所以实际上我只想 'move' 它）。

在文档准备就绪时，一些事件在插件（我不想编辑）中绑定到我要克隆的元素的子元素。

当我像这样克隆元素时：

$('.FSGD-logo-slider-element-info').each(function(){
    $number = $(this).attr('data-trigger');

    $element = $(this).clone(true, true);

    $('.FSGD-logo-slider-element[data-index="'+$number+'"]').after($element);
    $(this).remove();
});

该元素已被克隆，但它们不会对任何事件做出反应。

当我这样做时（用 live-method 查看第三行）：

$('.FSGD-logo-slider-element-info').each(function(){
    $number = $(this).attr('data-trigger');

    $element = $(this).live().clone(true, true);

    $('.FSGD-logo-slider-element[data-index="'+$number+'"]').after($element);
    $(this).remove();
});

正在运行。但是自 jquery 1.9 起删除了 live 方法，因此我也得到了错误输出。

我无法解释为什么该代码可以正常工作，而且如果没有 live 方法，我也不知道如何让它正常工作。

我希望有人能够提供帮助。那太棒了。

Answer 1

i want to clone a element and insert on another position in the DOM. (So actually i just want to 'move' it).

然后移动它：

$('.FSGD-logo-slider-element-info').each(function(){
    var $number = $(this).attr('data-trigger');

    $('.FSGD-logo-slider-element[data-index="'+$number+'"]').after(this);
});

示例：

// Hook an event on a child of the info elements
$(".FSGD-logo-slider-element-info input").on("click", function() {
  alert($(this).parent().attr("data-trigger"));
});

// Move the elements
setTimeout(function() {
  $('.FSGD-logo-slider-element-info').each(function(){
    var $number = $(this).attr('data-trigger');

    $('.FSGD-logo-slider-element[data-index="'+$number+'"]').after(this);
  });
  
  $("p").remove();
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="FSGD-logo-slider-element-info" data-trigger="1">
  Info One <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element-info" data-trigger="2">
  Info Two <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element-info" data-trigger="3">
  Info Three <input type="button" value="Click me">
</div>
<div class="FSGD-logo-slider-element-info" data-trigger="4">
   Info Four <input type="button" value="Click me">
</div>

<div class="FSGD-logo-slider-element" data-index="1">
  Element One
</div>
<div class="FSGD-logo-slider-element" data-index="2">
  Element Two
</div>
<div class="FSGD-logo-slider-element" data-index="3">
  Element Three
</div>
<div class="FSGD-logo-slider-element" data-index="4">
  Element Four
</div>

<p>Elements will move after a second</p>

旁注：我在上面的 $number = ... 前面添加了 var。没有它，您的代码就会成为 The Horror of Implicit Globals 的牺牲品（当然除非它是在父作用域中声明的，但这显然被用作本地，所以这没有多大意义）。

Jquery live() 和 clone() 的 1.10 组合 - 奇怪的行为

Jquery 1.10 combination of live() and clone() - weird behaviour

javascript

jquery

dom-manipulation