jQuery：将可点击事件分配给具有相似ID的多个div

Question

我正在显示多个条目的网站上工作。每个条目都可以展开/折叠，显示更多/更少的信息。每个条目的HTML看起来像：

<div id="entry-1"><div>some text</div><div><img></div></div> 
<div id="entry-2"><div>some text</div><div><img></div></div> 
<div id="entry-3"><div>some text</div><div><img></div></div> 

“entry- {1,2,3}”中的1,2,3是每个帖子的ID。如何将点击事件绑定到每个div？

我试着这样做：

$('div[id^="entry-"]').click(myFunc($(this))) ; 

但是当我点击，什么也不会发生，点击不火，甚至在页面加载时，JavaScript执行时，虽然。

Answer 1

的问题是this关键字。在此代码...

$('div[id^="entry-"]').click(myFunc($(this))); 

...的this值不指向已被点击，而是全局对象（窗口）的DOM元素。

这会工作：

$('div[id^="entry-"]').click(function() { 
    myFunc($(this)); 
}); 

---

由于@JCOC指出，您呼叫的功能。
在您的原始代码中，将立即调用myFunc($(this))，并将其返回值传递给click()方法。

所以，如果你的函数返回undefined，例如，然后将生成的代码会是这样：

$('div[id^="entry-"]').click(undefined); 

...这显然是行不通的。

Answer 2

我不确定myFunc（）在做什么，但是你的选择器很好。看到这个例子：

http://jsfiddle.net/sYWwK/

它注销DIV你点击：

$('div[id^="entry-"]').click(function() { 
     console.log($(this)); 
    }); 

Answer 3

尝试关闭

$('div[id^="entry-"]').click(myFunc($(this))) ; 

到

$('div[id^="entry-"]').click(function(){ myFunc($(this)); }) ; 

Answer 4

我在这里看到的问题是您正在执行该功能。你可以这样做：

$('div[id^="entry-"]').click(myFunc) ; 

function myFunc(){ 
    var some = $(this); 
    ... 
} 

另外，我以前推荐您使用类：

<div id="entry-1" class="entry"></div> 
<div id="entry-2" class="entry"></div> 
//JS Selector: 
$("div.entry") 

所以总和：

$('div.entry').click(myFunc); 

Answer 5

现在你要附加一个点击监听器每一个入口。实现此目的的更好方法可能是将单击侦听器附加到条目的父级。所以，如果我们有如下HTML：

<div id="entries"> 
    <div id="entry-1"><div>some text</div><div><img></div></div> 
    <div id="entry-2"><div>some text</div><div><img></div></div> 
    <div id="entry-3"><div>some text</div><div><img></div></div> 
</div> 

中的JavaScript将是这个样子：

$('#entries').click(function (e) { 
    if (e.target.id.match('entry')) { 
    var entry = $(e.target); 
    // logic for show more/less 
    } 
}); 

如果你去的路线，其他人都建议，并在每个条目，在JavaScript中使用类看起来更像是这样的：

$('#entries').click(function (e) { 
    if (e.target.className.match('entry') || $(e.target).parents('.entry').length) { 
    var entry = $(e.target); 
    // logic for show more/less 
    } 
});