0

我正在编写的 jQuery 插件的一部分涉及将输入<div>（内容）包装到动态创建<div>的（容器）中。

然后我的插件需要在不更改内容 div 的情况下将事件处理程序添加到容器 div。

这是我能写的最简单的 HTML 来描述我的问题。如果显示此内容并单击容器，则不会触发该事件：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>   
    <script type="text/javascript">
        $(function(){
            var container = $('<div class="container">');           
            $('#content').wrap(container);          // (A)
            container.click(function(e){alert('clicked');}); // (B)
        });
    </script>   
</head>
<body>
    <div id="content">the content</div>
</body>
</html>

请注意，如果标有 (A) 和 (B) 的行在周围切换，则代码按预期工作。我不能在我的插件中这样做，因为我的插件有点复杂。

4

2 回答 2

1

尝试：

var container = $('<div class="container">');           
$('#content').wrap(container);          
var wrapper = $('#content').parent();
wrapper.click(function(e){alert('clicked');});

wrap 函数复制一个包装元素，它不是同一个对象。

从手册：

.wrap() 函数可以采用任何可以传递给 $() 工厂函数的字符串或对象来指定 DOM 结构。这个结构可以嵌套好几层，但应该只包含一个最里面的元素。此结构的副本将环绕匹配元素集中的每个元素。此方法返回用于链接目的的原始元素集。

于 2013-09-04T13:47:20.347 回答
0

您可以轻松管理

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>   
    <script type="text/javascript">
        $(function(){
            var container = $('<div class=" unique_container container">');           
            $('#content').wrap(container);          // (A)
           // container.click(function(e){alert('clicked');}); // (B)
        });
    </script>   
</head>
<body>
    <div id="content">the content</div>
<script>
    $("body").delegate(".unique_container", "click", function() {
        alert('now it is clicked.');
    });
</script>
</body>
</html>

如果您的问题得到解决，请点赞该页面。

http://justprogrammer.com/2013/06/25/jquery-basic-concepts/

请在此处添加您的唯一容器类。

于 2013-09-04T13:50:56.300 回答