I am working on a site that displays multiple entries. Each entry can be expanded/collapsed, showing more/less information. The HTML for each entry looks like:

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

The 1,2,3 in "entry-{1,2,3}" is the id of each post. How do I tie a click event to each div?

I tried doing:

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

But when I click, nothing happens, the click doesn't fire even though when the page loads, the JavaScript is executed.

I am working on a site that displays multiple entries. Each entry can be expanded/collapsed, showing more/less information. The HTML for each entry looks like:

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

The 1,2,3 in "entry-{1,2,3}" is the id of each post. How do I tie a click event to each div?

I tried doing:

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

But when I click, nothing happens, the click doesn't fire even though when the page loads, the JavaScript is executed.

• javascript
• jquery
• html

• 3 I recommend you use classes instead of that id's – JCOC611 Commented Feb 11, 2011 at 2:44

5 Answers 5

The problem is the this keyword. In this code...

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

... the this value doesn't point to the DOM element that has been clicked, but instead to the global object (window).

This would work:

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

As @JCOC pointed out, you are calling the function.
In your original code, myFunc($(this)) will be called immediately and its return value is passed into the click() method.

So, if your function returned undefined, for instance, then the resulting code would be this:

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

... which obviously doesn't work.

Try turning your

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

into

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

The problem I see here is that you are executing the function. You could do this:

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

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

Additionally, I previously recommended you to use classes:

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

So in sum:

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

I am not sure what myFunc() is doing, but your selector is fine. See this example:

http://jsfiddle.net/sYWwK/

It's logging out the div you click on:

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

Right now you're attaching a click listener to every single entry. A better way to accomplish this might be to attach a click listener to the parent of the entries. So, if we have the following 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>

The JavaScript would look something like this:

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

If you went the route that other people have suggested and used classes on each entry, the JavaScript would look more like this:

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