0

在我的 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!")
    });
});
4

4 回答 4

2

使用委托：

$(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!")
    });
});
于 2013-07-31T12:52:31.827 回答
2

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

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

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

这称为事件委托。

于 2013-07-31T12:53:07.640 回答
1

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

于 2013-07-31T12:52:46.740 回答
1

听起来问题是由于您的元素在页面加载后被添加到 DOM （即通过 ajax 请求），这意味着这$(".delete-row").click(function(event) {});将失败，因为在注册时该元素会丢失，这是在.

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

.parentElement将是一个元素，它是您的 ajax 添加的 html 的父元素，但不是动态添加的。

于 2013-07-31T12:53:01.877 回答