JQuery将点击事件添加到未知的div id答案

【问题标题】：JQuery add click event to unknown div idJQuery将点击事件添加到未知的div id
【发布时间】：2013-08-04 17:23:07
【问题描述】：

我正在加载一个显示多个元素的 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() 事件，并使用 .load() 根据他们的用户 ID HTML5 标记加载一个页面

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

如何添加此活动？

谢谢。

【问题讨论】：

首先将id='feed_element' 更改为class='feed_element'。 id 必须是唯一的。
好的，完成，谢谢建议

标签： javascript jquery events html

【解决方案1】：

像这样试试..

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

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

【讨论】：

这段代码你在哪里写的？它必须在您的文档加载后执行。
在我的

【解决方案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>

【讨论】：

听起来像我想做的，但它不起作用......我把 jquery 代码放在我的 $('#container_feed').load('messages_feed.php' );有问题吗？
好的，我的问题似乎在这里，如果我将 HTML 直接放在我的文件中（没有 .load），它工作得很好，但是使用 .load 方法，它不起作用。有什么想法吗？

【解决方案3】：

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

试试这个

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

【讨论】：

【解决方案4】：

你不能为不同的元素拥有相同的 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 "也可以代替"live()"

【讨论】：

明确一点，on 已经替换了live。 live 在 1.7 中被弃用并在 1.9 中被删除。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

/* 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')。

代表团是你的朋友。

【讨论】：