javascript - 远程 javascript 文件上的 jquery 单击监听器

Question

我有一个简单的链接:

<a href="#" id="test">Test Link</a>

我想在按下此链接时收到警报，因此我添加:

<script>
$('#test').click(function() { alert('clicked!'); } );
</script>

它工作正常，但是当我将这段代码移动到远程 javascript 文件时，它不起作用..

知道为什么吗？

我也试过这段代码:

$(document).ready(function() {
    $('#test').click(function() { alert('clicked!'); });
});

Answer 1

您的第二个示例使用 ready 函数，应该可以正常工作。如果您在 ID 为“test”的元素下方包含脚本，那么您的第一个示例也应该有效(当您的脚本运行时该元素必须已经存在，因为您没有等待 DOM 就绪)。在这两种情况下，您的脚本都必须包含在 jQuery 脚本下方(之后)。

Example when you don't use ready

Example when you do use ready

我会检查您的外部文件是否确实正在加载(在浏览器控制台中查找 404 错误)。

---

更新:从您下面的评论来看，问题是当您尝试连接处理程序时“test”元素不存在。 click 仅在元素已经 存在时才在该元素上设置处理程序。如果您稍后创建元素，您有三个选项(其中两个实际上是相同的):

1. 使用您已有的代码，但在创建元素后运行它(例如，在您正在创建的 success callback of the ajax call 中)。
2. 使用live ，它基本上在整个文档范围内 Hook click 事件，然后检查是否单击了您告诉它的元素(在本例中为“#test”)。
3. 使用delegate在适当的容器上(您要在其中添加“测试”的元素)。 delegate 是更有针对性的 live 版本。

live 和 delegate 都是称为事件委托(delegate)的技术示例，jQuery 通过提供这些方法使您可以轻松实现这一点。 p>

有关更多信息和示例，请参阅链接，但例如，假设您要将“test”元素添加到 ID 为“target”的元素。您将像这样使用 delegate:

$("#target").delegate("#test", "click", function() {
    alert("Clicked");
});

它 Hook 了“target”上的 click 事件，但是行为很像您在“test”一开始就神奇地将它卡在了“test”上添加。在您的处理程序中，this 与 click 一样引用“test”元素。