Question

我想克隆一个元素并插入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方法被删除了，因为我也得到了错误输出。

我无法解释为什么代码工作正常，如果没有实时方法，我也无法让它工作。

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

Answer 1

我想克隆一个元素并插入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>

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

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

1 个答案: