使用 jQuery 选择器指定多个对象

Posted 2023-05-09

【中文标题】使用 jQuery 选择器指定多个对象

【英文标题】：Specifying Multiple Objects with jQuery Selector

【发布时间】：2012-10-11 19:33:22

【问题描述】：

我有一个由 php 生成的 html 组成的导航栏，如下所示：

<ul>
<div class="container"><button type="button" name="1" class="delButton" ></button></div>
<a href="/" >Home</a>
<div class="container"><button type="button" name="2" class="delButton" ></button></div>
<a href="/" >Events</a>
<div class="container"><button type="button" name="3" class="delButton" ></button></div>
<a href="/" >Calendar</a>
<div class="container"><button type="button" name="4" class="delButton" ></button></div>
<a href="/" >About Us</a>
</ul>

每个集合都包含一个删除按钮和一个链接。根据 mysql 数据库，按钮的 name 属性包含其后链接的唯一 ID。

当点击相应的删除按钮时，我正在使用以下 jQuery 代码删除链接。请注意，我使用的是自定义 ajax() 方法，而不是 jQuery 的 ajax 方法。

$('.container button').click(function() 
     if (confirm('Are you sure you wish to remove this link?'))
        ajax('POST', '/deletelink.php', 'id='+this.name, function(xmlhttp) 
           $('.nav ul').load('/getnav.php');
        );
);

当我单击任何一个删除按钮时，上面的代码按预期工作，它会删除相应的链接。但是，如果在删除一个链接后我尝试单击另一个删除按钮，则没有任何反应。确认（）警报框甚至没有出现。这表明没有为第二次删除尝试输入 click() 函数。

我对此的解释是，一旦函数第一次执行，它会将选择器解析为被单击的特定按钮；这意味着随后单击不同的“.container 按钮”将对此功能无效。

我的评估是否正确？如果是这样，有什么方法可以阻止函数将选择器解析为特定对象？如果没有，是否有任何替代方法可以让我对我现在设置的所有删除按钮使用一个功能？

【问题讨论】：

这不是您提出的确切问题的答案，但在某些情况下，如果 AJAX 删除请求成功，则可以简单地使用 JQuery 删除链接。

【参考方案1】：

当您再次加载 getnav.php 时，您的点击处理程序将被覆盖。您可以使用以下构造：

$(document).on('click', '.container button', function() 
    // click handler code here

您也应该能够缩小选择器的范围：

$('.nav ul').on('click', '.container button', function() 
    // click handler code here

这会将点击处理程序绑定到<ul> 本身，然后使用.container button 选择器来确定将点击事件“发送”到何处。

另请参阅：.on()

【讨论】：

还应注意.on() 是最好的绑定方式（对于大多数意图和目的而言）。

使用$('.container button').live('click', function() 似乎比.on() 更简单？

@Wolfram .live() 已弃用。

【参考方案2】：

在删除后加载内容后，您必须再次绑定事件。最好的方法是使用 jQuery on。它会自动找到添加到 DOM 中与您的选择器匹配的新元素并将它们绑定到事件

http://api.jquery.com/on/

改用这个

$('.nav ul').on('click', '.container button', function() 

【参考方案3】：

如果栏是 PHP 生成的，您总是可以在循环期间将 onclick 转储到输出中。比如：

onclick = "deleteLine('<?=$id?>'); void(0); return false;"

然后你可以把你的.click函数改成一个名为deleteLine的函数，比如：

function deleteLine(id) 

我意识到这不是一个了不起的解决方案，但它应该可以完成这项工作。

【讨论】：

这个答案有几个问题。首先，它以不干净的方式将页面结构与 javascript 混合在一起。其次，函数名称模糊。第三，函数附加到任意上下文。第四，两者都“返回假”；和“无效（0）；”在这里是多余的。第五，该解决方案增加了响应所需的信息。第六，您的答案中的问号标签可能在某些 PHP 服务器上被禁用。

嗨，巴巴罗萨。感谢您的反馈意见。请注意，该代码旨在作为“概念证明”，而不是推荐的生产代码行。不过我会记住你的话！