Fatal编程技术网
  • jquery/
  • Jquery 将事件绑定到包装器元素

Jquery 将事件绑定到包装器元素

jquery

Jquery 将事件绑定到包装器元素,jquery,Jquery,我正在编写的jQuery插件的一部分涉及将输入（内容）包装到动态创建的（容器）中 然后，我的插件需要在不更改content div的情况下向container div添加事件处理程序 这是我能写的描述我的问题的最简单的HTML。如果显示此内容并单击容器，则不会触发事件： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js

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

然后，我的插件需要在不更改content div的情况下向container 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>


$（函数（）{
变量容器=$（''）；
$（“#内容”）.wrap（容器）；/（A）
容器.click（函数（e）{alert（'clicked'）；}）；//（B）
});
内容
请注意，如果标记为（A）和（B）的行被切换，代码将按预期工作。我无法在我的插件中执行此操作，因为我的插件有点复杂。

尝试：

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

var容器=$（''）；
$（'#content'）。包装（容器）；
var wrapper=$（'#content'）.parent（）；
click（函数（e）{alert（'clicked'）；}）；
wrap函数复制包装器元素，它不是同一个对象

从手册：

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

你可以很容易地应付

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


$（函数（）{
变量容器=$（''）；
$（“#内容”）.wrap（容器）；/（A）
//容器.click（函数（e）{alert（'clicked'）；}）；//（B）
});
内容
$（“body”）.delegate（“.unique_container”，“click”，function（）{
警报（'现在已单击'）；
});
如果你的问题解决了，请喜欢这个页面

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

如果文档中有更多的.container元素，这将导致问题。谢谢，但它不能很好地与@PiotrUchman所说的其他.container元素配合使用，因为我的项目是一个插件，所以我不能使用它。