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

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

本文关键字：组合 clone live Jquery      更新时间：2023-09-26

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

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

当我像这样克隆元素时：

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

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

当我这样做的时候（看看第三行的实时方法）：

$('.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方法可以让它工作。

我希望有人能帮忙。那太棒了。

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

然后移动它：

$('.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。如果没有它，您的代码就会成为隐式全局的恐怖的牺牲品（当然，除非它是在父作用域中声明的，但它显然是作为本地的，所以这没有多大意义）。

相关文章：