Question

当我使用jQuery动态创建div时，使用它来包装另一个元素（使用jQuery.wrap（）方法）并将一些事件绑定到包装器，它们不会被触发。为什么呢？

var $wrapper = $('<div class="random-wrapper"></div>');   

$('.random-element').wrap($wrapper);


$wrapper.click(function(){
    alert('Sh*t happens ..');
});

只有被委托方法绑定的事件监听器才会被触发，但我没有看到为什么它不能直接触发绑定到元素实例的事件的原因。

Answer 1

因为使用.wrap()会在传递元素实际包装之前创建传递元素的克隆。因此，包装中使用的实际元素与传递的元素不同（在这种情况下，它不由$wrapper引用）。

相反，如果您访问目标元素的父级并绑定事件，它应该工作

＆＃13 ;

＆＃13;

var $wrapper = $('<div class="random-wrapper"></div>');

$wrapper.click(function(){
  alert('before wrap - wrapper click');
});

$('.random-element').wrap($wrapper);

$wrapper.click(function(){
  alert('wrapper click');
});

$('.random-element').parent().click(function(){
  alert('parent click');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="random-element">Lipsum</div>

＆＃13;

＆＃13; .wrap()

.wrap（）函数可以接受任何可能的字符串或对象传递给$（）工厂函数以指定DOM结构。这个结构可以嵌套几层深，但应该只包含一个最重要的元素。 此结构的副本将被包裹匹配元素集中的每个元素。此方法为链接目的返回原始元素集。

jQuery - 元素在换行后不触发事件

1 个答案: