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');
        });
});

当我单击任何一个删除按钮时，上面的代码按预期工作，并删除相应的链接。但是，如果删除一个链接后我尝试点击另一个删除按钮，则没有任何反应。 confirm（）警告框甚至没有出现。这表明没有为第二次删除尝试输入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) {

我意识到这不是一个了不起的解决方案，但它应该能够胜任。

使用jQuery Selector指定多个对象

3 个答案: