Question

在我的HTML文档中，我有一个带有空表体的表，当文档完全加载时，它会被jQuery自动填充。表体由PHP脚本生成，jQuery通过简单的GET请求获取内容。

这是我的PHP代码......

<?php

// ...
// ...
// Just take a look at the following two lines,
// the other code is not important in this case.
while ($tableDataRow = $tableData->fetch_assoc())
    echo '<tr><td>'. $tableDataRow['id']. '</td><td>'. $tableDataRow['name']. '</td><td><a href="#" class="delete-row" data-id="'. $tableDataRow['id']. '">Delete</a></td></tr>';

?>

输出可能是......

<tr><td>1</td><td>Nadine</td><td><a href="#" class="delete-row" data-id="1">Delete</a></td></tr><tr><td>2</td><td>Nicole</td><td><a href="#" class="delete-row" data-id="2">Delete</a></td></tr>

一切都很完美，唯一的问题是如果发生任何点击事件，jQuery不会做出反应。我的jQuery代码看起来像这样......

$(document).ready(function() {
    $(".delete-row").click(function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?!
        event.preventDefault();
        alert("You clicked on that link!")
    });
});

Answer 1

使用委托：

$(document).ready(function() {
    $("#mytable").on("click",".delete-row",function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?!
        event.preventDefault();
        alert("You clicked on that link!")
    });
});

Answer 2

.click()使用jQuery的bind()方法，该方法基本上是DOM的快照。在这种情况下，将在文档就绪时生成该快照。

当您的PHP代码动态添加到页面时，这不会包含在文档就绪的DOM快照中。出于这个原因，jQuery有一个on()方法可以代替使用：

$("table").on('click', '.delete-row', function() { ... });

这称为事件委托。

Answer 3

事件是在页面生成时绑定的，但是你的表是附加的，所以你应该使用类似“on”的东西，或者jQuery的最新事件绑定方法，而不是“click”

Answer 4

听起来问题是由于你的元素在页面加载后被添加到DOM（IE。通过ajax请求），这意味着$(".delete-row").click(function(event) {});会因为注册时缺少元素而失败这是使用on。

$('.parentElement').on('click','.delete-row',function() {
   event.preventDefault();
  alert("You clicked on that link!");
});

.parentElement将是ajax添加的html的父元素，但不会自动添加。

jQuery选择不起作用

4 个答案: