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事件处理。无需使用.children或.each甚至$('#container_feed .feed-element')遍历每个元素。

代表团是你的朋友。

Answer 2

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

代码示例：

$("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 recomends“on（'click'，function（）{}）”而不是“click（function（）{}）”，我猜“click”将在以后的某个时候被弃用“也可以取代”live（）“

Answer 4

试试这样..

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

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

Answer 5

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

试试这个

$('#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.
});

JQuery将click事件添加到未知的div id

6 个答案: