54

我不是程序员，但我喜欢构建原型。我所有的经验都来自于 actionScript2。

这是我的问题。为了简化我的代码，我想弄清楚如何将“.click”事件附加到 HTML 正文中已经存在的 div 上。

<body>
<div id="dog-selected">dog</div>
<div id="cat-selected">cat</div>
<div id="mouse-selected">mouse</div>

<div class="dog"><img></div>
<div class="cat"><img></div>
<div class="mouse"><img></div>
</body>

我的（失败的）策略是：
1）创建一个对象数组：

var props = {
"dog": "false",
"cat": "true",
"mouse": "false"
};

2) 使用 '.each' 遍历数组，并使用 '.click' 事件扩充每个现有的 div。最后，构造一个局部变量。

这是一个原型：

$.each(props, function(key, value) {    
$('#'+key+'-selected').click(function(){
var key = value;  
});
});
4

2 回答 2

111

您可以使用的一种解决方案是将单击事件处理程序绑定到的任何 div 分配一个更通用的类。

例如：

HTML：

<body>
<div id="dog" class="selected" data-selected="false">dog</div>
<div id="cat" class="selected" data-selected="true">cat</div>
<div id="mouse" class="selected" data-selected="false">mouse</div>

<div class="dog"><img/></div>
<div class="cat"><img/></div>
<div class="mouse"><img/></div>
</body>

JS：

$( ".selected" ).each(function(index) {
    $(this).on("click", function(){
        // For the boolean value
        var boolKey = $(this).data('selected');
        // For the mammal value
        var mammalKey = $(this).attr('id'); 
    });
});
于 2013-09-23T18:41:41.560 回答
26

无需使用.each. click已经绑定到所有div事件。

$('div').click(function(e) {
    ..    
});

看演示

注意：使用硬绑定，例如.click确保动态加载的元素不会被绑定。

于 2015-11-19T23:46:02.033 回答