Question

我正在撰写的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）的行被切换，则代码按预期工作。我不能在我的插件中执行此操作，因为我的插件有点复杂。

Answer 1

尝试：

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

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

来自手册：

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

Answer 2

您可以轻松管理

<!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/

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

将事件绑定到包装器元素

2 个答案: