Javascript jQuery：将可点击事件分配给多个id相似的div

我正在一个显示多个条目的网站上工作。每个条目都可以展开/折叠，显示更多/更少的信息。每个条目的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>

但是当我单击时，什么也没有发生，即使在页面加载时，JavaScript被执行，单击也不会触发。

我不确定myFunc（）在做什么，但是您的选择器很好。请参见此示例：

它正在注销您单击的div：

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

试着转动你的手

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

进入

---

问题在于

这个

关键字。在此代码中

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

。。。

this

值不指向已单击的DOM元素，而是指向全局对象（窗口）

这将有助于：

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

---

正如@jcc所指出的，您正在调用函数。
在原始代码中，将立即调用

myFunc（$（this））

，并将其返回值传递到

click（）

方法中

因此，例如，如果您的函数返回了

未定义的
，则生成的代码如下：

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

。。。这显然不起作用。
我在这里看到的问题是您正在执行函数。您可以这样做：

$('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")

现在，您正在为每个条目附加一个单击侦听器。实现这一点的更好方法可能是将单击侦听器附加到条目的父项。因此，如果我们有以下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
  }
});

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

我建议你使用类，而不是id为+1的你打败了我o） 如果可能，最好让
myFunc
包装它。你说得对。您必须检查父级是否也与id或类匹配。我仍然认为事件委派是解决这个问题的一种更好的方法。虽然事件委派很好，但使用jQuery的live（）或delegate（）方法做类似的事情会更容易$（'div[id^=“entry-”]）.live（'click'，function（）{}）；我选择这个答案是因为解释了代码是如何执行的。很高兴知道在传递参数时事件是如何注册的。
<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>

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

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