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仅在已存在时才在元素上设置处理程序。如果您稍后创建元素，则有三个选项（其中两个实际上是相同的）：

使用您已有的代码，但在创建元素后运行它（例如，在您正在制作的success callback of the ajax call中）。

使用live，它基本上挂钩文档范围内的click事件，然后检查是否单击了您告诉它的元素（在本例中为“#test”）。

在适当的容器（您要添加“test”的元素）上使用delegate。 delegate是live的更具针对性的版本。

live和delegate都是名为事件委派的技术的示例，jQuery通过提供这些方法使您更容易。

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

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

将click事件挂钩在“目标”上，但行为就像你只要添加“测试”就神奇地将它挂在“测试”上一样。在您的处理程序中，this与click一样引用“test”元素。

jquery在远程javascript文件上单击侦听器

1 个答案: