jQuery将单击事件添加到未知的div ID

Question

I'm loading a php page that shows multiple elements, depending of the users (so i can't know how many items will be show). Those elements looks like :

<div id='container_feed'>
    <div id='feed_element' data-userid='4'>Random Dude</div>
    <div id='feed_element' data-userid='5'>Random Dude 2</div>
</div>

I'd like to add a click() event on each div and load a page depending of their userid HTML5 tag with .load()

I tried child(), each(), and some other method whithout success...

How can i add this event ?

Thanks.

Answer 1

Why not just delegate all the clicks like so:

/* You could also use '>div' if you can't guarantee the class name */
$('#container_feed').on('click', '.feed-element' , function() {});

That way, you're only adding the one event initially, but all divs inside will be handled by the click event. No need to loop through each element, using .children or .each or even $('#container_feed .feed-element') .

Delegation is your friend.

Answer 2

First, don't use multiple IDs of same name. Use a CSS- class .
Then access the userid in your click function like that:

Code Example:

$("div.feed_element").click(function(e) {
    var clickedUserId = $(this).data('userid');

    $('.userdata-container').load('ajax/userpage_' + clickedUserId +'.html');
});

Corresponding HTML:

<div id='container_feed'>
    <div class='feed_element' data-userid='4'>Random Dude</div>
    <div class='feed_element' data-userid='5'>Random Dude 2</div>
</div>
<div class='userdata-container'>
    <!-- The Ajax Code is loaded into this container -->
</div>

Answer 3

you can't have the same id for different elements, that's the point for an id (it should be unique). Use a class instead or just all div children from the main div

$('#container_feed div').on('click',function(){
  // do something, the the userid data, load the page somewhere, etc...
})

or use a class

html:

<div id='container_feed'>
  <div class='feed_element' data-userid='4'>Random Dude</div>
  <div class='feed_element' data-userid='5'>Random Dude 2</div>
</div>

js:

$('.feed_element').on('click',function(){
  // do something, the the userid data, load the page somewhere, etc...
})

newer versions of jquery recomends "on('click',function(){})" instead of "click(function(){})", i guess "click" will be deprecated sometime in the future and "on" can also replace "live()"

Answer 4

Try like this..

$("div[id='feed_element']").click(function() {
     // Your stuff
});

You should use class, As ID is always used for unique identification.

Answer 5

First i would not use the same feed_element id for all divs.

Try this

$('#container_feed').children().each(function(){
  if($(this).attr('data-userid') == # you want){
    $(this).click(function(){
      //your stuff here
    });
  }
});

Answer 6

$(".feed_element").click(function(event) {
    var userId = $(this).attr('data-userid');
    //make your ajax call.
});