javascript - JQuery将点击事件添加到未知的div id

Question

我正在加载一个显示多个元素的 php 页面，具体取决于用户（所以我不知道将显示多少项目）。这些元素看起来像：

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

我想在每个 div 上添加一个 click() 事件，并根据他们的用户 ID HTML5 标记和 .load() 加载一个页面

我尝试了 child()、each() 和其他一些方法，但没有成功......

我怎样才能添加这个事件？

谢谢。

Answer 1

为什么不像这样委派所有点击：

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

这样，您最初只添加一个事件，但里面的所有 div 都将由 click 事件处理。无需遍历每个元素，使用.childrenor.each甚至$('#container_feed .feed-element').

代表团是你的朋友。

Answer 2

首先，不要使用多个同名ID。使用 CSS- class。
然后像这样访问您的点击功能中的用户标识：

代码示例：

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

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

对应的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

对于不同的元素，您不能拥有相同的 id，这就是 id 的意义（它应该是唯一的）。使用一个类，或者只使用主 div 中的所有 div 子级

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

或使用一个类

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...
})

较新版本的 jquery 推荐“on('click',function(){})”而不是“click(function(){})”，我猜将来某个时候会弃用“click”，“on”也可以替换“直播（）”

Answer 4

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

Answer 5

试试这样。。

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

您应该使用类，因为 ID 始终用于唯一标识。

Answer 6

首先，我不会对所有 div 使用相同的 feed_element id。

尝试这个

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