Javascript JQuery将单击事件添加到未知的div id

我正在加载一个显示多个元素的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>

随机花花公子
随机花花公子2

我想在每个div上添加一个click（）事件，并根据它们的userid HTML5标记加载一个带有.load（）的页面

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

如何添加此事件

谢谢。

像这样试试

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

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

尝试这样做

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

---

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

首先，不要使用相同名称的多个ID。使用CSS-

类

然后在单击函数中访问userid，如下所示：

代码示例：

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

    $('.userdata-container').load('ajax/userpage_' + clickedUserId +'.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>

对应的HTML:

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

    $('.userdata-container').load('ajax/userpage_' + clickedUserId +'.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>

随机花花公子
随机花花公子2

首先，不要使用同名的多个ID。使用CSS-

类

然后在单击函数中访问userid，如下所示：

代码示例：

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

    $('.userdata-container').load('ajax/userpage_' + clickedUserId +'.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>

对应的HTML:

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

    $('.userdata-container').load('ajax/userpage_' + clickedUserId +'.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>

随机花花公子
随机花花公子2

首先，我不会对所有div使用相同的feed\u元素id

试试这个

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

---

首先，我不会对所有div使用相同的feed_元素id

试试这个

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

---

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

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

或者使用一个类

html:

---

较新版本的jquery推荐“on（'click'，function（）{}）”而不是“click（function（）{}）”，我想“click”在将来的某个时候会被弃用，“on”也可以替换“live（）”

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

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

或者使用一个类

html:

---

较新版本的jquery推荐“on（'click'，function（）{}）”而不是“click（function（）{}）”，我想“click”在将来某个时候会被弃用，而“on”也可以代替“live（）”

为什么不像这样委托所有的点击呢：

/* 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”）

遍历每个元素

---

委派是你的朋友。

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

/* 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”）

遍历每个元素

---

委派是你的朋友。

首先将

id='feed\u element'

更改为

class='feed\u element'

。id必须是唯一的。好的，完成了，感谢您的建议首先将

id='feed\u element'

更改为

class='feed\u element'

。id必须是唯一的。好的，完成了，谢谢你的建议。你在哪里写的这段代码？它必须在您的文档加载后执行。在我的作用域中，就在使用.load加载页面之后。您在哪里编写了此代码？它必须在您的文档加载后执行。在我的范围内，就在使用.load加载页面之后。load听起来像是我想做的，但它不起作用。。。我将jquery代码放在$（'#container_feed'）后面；这是一个问题吗？好的，我的问题似乎在这里，如果我把HTML直接放在我的文件中（没有.load），它工作得很好，但是使用.load方法，它不工作。你知道吗？听起来像是我想做的，但没用。。。我将jquery代码放在$（'#container_feed'）后面；这是一个问题吗？好的，我的问题似乎在这里，如果我把HTML直接放在我的文件中（没有.load），它工作得很好，但是使用.load方法，它不工作。对此有什么想法吗？请澄清，

on

已经被

live

取代

live

在1.7版中被弃用，在1.9版中被删除。请澄清，上的

已被替换
live
live
在1.7中被弃用，在1.9中被删除。