jQuery - 选择嵌套在 div ul li 中的特定按钮

Posted 2023-03-04

【中文标题】jQuery - 选择嵌套在 div ul li 中的特定按钮

【英文标题】：jQuery - Selecting specific button nested within div ul li

【发布时间】：2012-10-30 10:23:49

【问题描述】：

我承认迷路了。我正在尝试选择一个嵌套在嵌套在 div 中的 ul 中的行项目中的按钮

这是创建菜单栏的 php。它通过 ajax 返回到 id 为“menubar”的 div。那部分工作正常。但是，我的点击功能都没有做任何事情。

echo "<ul>";
echo "<li class = 'menu'><button class = 'menbtn' id='scores'>Scores</button></li>";
echo "<li class = 'menu'><button class = 'menbtn' id='rules'>Rules</button></li>";
echo "<li class = 'menu'><button class = 'menbtn' id='courses'>Courses</button></li>";
echo "<li class = 'menu'><button class = 'menbtn' id='history'>Comments</button></li>";
echo "<li class = 'menu'><button class = 'menbtn' id='history'>Reservation</button></li>";
echo "</ul>";

我假设我必须使用某种嵌套选择，因为对于 id 为“scores”的按钮的单击功能 - $('#scores') 什么都不做。我已经尝试了各种嵌套选择器并且已经删除了。

如果有人可以向我展示带有“分数”ID 的按钮的正确选择器，我会从那里弄清楚。

谢谢，

DMD

【问题讨论】：

获取输出标记和 JS 并粘贴到 jsfiddle 或 jsbin。需要更多上下文。点击#scores 应该没问题。我在猜测 $ 准备好之前的语法错误或绑定。

【参考方案1】：

您似乎没有将这些事件放在 document.ready 函数中。试着把它们放进去。

示例：

$(document).ready(function()
   $("#scores").click(function()
       // Your Stuff
   );
);

【参考方案2】：

这将为您的按钮添加一个事件侦听器。

$(document).on('click', '#scores', function ()
    //do something
);

【讨论】：

我的猜测也是如此，但 Q 缺少很多细节。

@user1813926 那么请投票并接受答案。乐于助人。

【参考方案3】：

首先，您的 html 按钮 Comments 和 reservations 中的标记无效，具有相同的 id，其次

选择器其实很简单

$("#scores") //<----

但是由于您没有提供有关如何构建 html 的太多详细信息，因此很难看出真正的解决方案是什么，只能猜测。一件事可能是您需要使用事件 on 在通过 php 添加 html 后触发事件处理程序

例如

$("#score").on("click", function() //do something);

【讨论】：

非常感谢 - id 没问题。我的 sn-p 编辑不正确。

【参考方案4】：

问题是jquery可以读取dom中ajax返回的新元素。 要通知 jquery 重新读取你必须调用 live 的 dom。

$('#scores').live("click",function()
     alert("you clicked scores");
);

【讨论】：

该功能已上线，已弃用，您必须通过功能on进行更改

.live 和 .on work，我感谢大家的建议。我怀疑我自己会找到答案。

【参考方案5】：

您可以使用live()方法，借助该方法您可以触发通过ajax添加的新元素。

$(document).ready(function()
  $('#scores').live('click',function()
    //Your code
  )
);

【讨论】：

谢谢。 .live 工作正常；但是我发现它已被弃用，而 .on 也可以使用。