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

Question

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

<ul>
<div class="container"><button type="button" name="1" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Home">Home</a>
<div class="container"><button type="button" name="2" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Events">Events</a>
<div class="container"><button type="button" name="3" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Calendar">Calendar</a>
<div class="container"><button type="button" name="4" class="delButton" alt="Delete"></button></div>
<a href="/" alt="About Us">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 按钮”将对此功能无效。

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

Answer 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()

Answer 2

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

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

改用这个

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

Answer 3

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

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

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

function deleteLine(id) {

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