您可以在 jQuery 中“单击”加载的内容吗？答案

【问题标题】：Can you 'click' loaded content in jQuery?您可以在 jQuery 中“单击”加载的内容吗？
【发布时间】：2011-12-15 04:31:55
【问题描述】：

我正在尝试创建一个示例 div 可点击的页面，如下所示。

但是我正在尝试这样做，因此如果用户单击徽标，它将使用 load 重新加载原始内容。

加载完成后，是否可以“点击”加载的<div id="example">？我目前正在尝试此操作，但在单击 file.php 中已加载的 <div id="example"> 时无法发出警报

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#example").click(function(){
        alert("You clicked me!");
    });

    $("#logo").click(function(){
        $("#main").load("file.php");
    });
});
</script>
    </head>

<body>
    <img id="logo" src="404.gif" />

    <div id="main">
        <div id="example">This is content.</div>
    </div>
</body>
</html>

file.php 包含

<div id="example">This is loaded content that can't be clicked?</div>

【问题讨论】：

标签： jquery load jquery-click-event

【解决方案1】：

问题

问题在于.click() 仅将事件绑定到当时存在于 DOM 中的元素。这意味着当您向页面添加新元素时，它不会绑定事件处理程序。

解决方案

如果您使用的是 jQuery 1.7+，而不是在代码中使用 .click()，请改用 .on()。

$("#main").on('click', '#example', function(){
    alert("You clicked me!");
});

...或者在旧版本的 jQuery 中使用 .live() 代替：

$("#example").live('click', function(){
    alert("You clicked me!");
});

这将确保添加到 DOM 的新元素也将绑定到它们的事件处理程序。

【讨论】：

您的旧版本使用应该调用.live() 方法而不是.on()。
如果我有$("#example").not("#random").on('click', function(){，这很好用，不是部分会导致问题吗？
你的例子有用吗？我在文档中看到 on 需要选择器，还是我遗漏了什么？
@DarrylHein 它确实需要一个选择器，但这不必在 on 括号内传递。请参阅此处底部的示例api.jquery.com/on
酷，我刚刚发现我的“on”语法确实需要额外的子选择器才能委托给“live” - 相应地更新了我的代码示例

【解决方案2】：

试试这个，

$("#example").live('click',function(){
   alert("You clicked me!");
});

【讨论】：

根据 jquery 1.7，不推荐使用 live() 方法。改为使用 on
如果你使用 jQuery 1.7+，你可以使用 on 否则你必须使用 live

【解决方案3】：

如果您使用的是 jquery 1.7+，请使用“on”。

http://api.jquery.com/on/

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 来附加事件处理程序。

【讨论】：

【解决方案4】：

问题是替换<div id="main">的innerHTML后，<div id="example">就不再有点击动作了。

有几种方法可以解决这个问题：

首先并且可能是最好的方法是使用.on()：

$("#main").on('click', '#example', function(){
   alert("You clicked me!");
});

这附加到#main，因此，你对里面的内容做什么并不重要。随着事件冒泡，on 会注意到它们，然后选择器将确定是否应该运行处理程序。

第二个是live。以下内容将替换您当前对#example 的点击：

$("#example").live('click', function(){
   alert("You clicked me!");
});

其中一个缺陷是 jQuery 一直在监视 dom 是否有任何变化，这取决于您将拥有多少，这可能会开始减慢速度（尽管在更快的机器上可能不会明显）。此外，.live() 在 1.7 中已被弃用。

最后一个选项是在#logo 点击上添加一个成功函数。我建议创建一个方法，这样您就没有重复的代码：

var example_click = function() {
    alert("You clicked me!");
};

$("#example").click(example_click);

$("#logo").click(function(){
    $("#main").load("file.php", example_click);
});

这意味着每次#main加载成功后，点击都会添加到#example。但这有点难看，因为您需要调用该函数两次。

【讨论】：

【解决方案5】：

尝试将example div 的click() 函数放在加载函数的回调中。

【讨论】：

【解决方案6】：

jQuery 1.7 引入了.on() API 用于事件绑定和事件委托：

$("#main").on("click", "#example", function() {
    alert("You clicked me!");
});

【讨论】：