0

我有一个导航栏，它由 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 按钮”将对此功能无效。

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

4

3 回答 3

2

当您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()

于 2012-10-22T01:16:58.177 回答
1

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

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

改用这个

$('.nav ul').on('click', '.container button', function() {
于 2012-10-22T01:19:47.583 回答
-1

如果该栏是 PHP 生成的，则您始终可以在循环期间将 onclick 转储到输出中。就像是：

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

然后，您可以将.click函数更改为名为 deleteLine 的函数，例如：

function deleteLine(id) {

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

于 2012-10-22T01:18:08.363 回答