2

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

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

发生此负载后，是否可以“单击”已加载<div id="example">？我现在正在尝试这个，当单击<div id="example">file.php 中的加载时它无法发出警报

<!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>
4

6 回答 6

7

问题

问题在于，.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 的新元素也将绑定到它们的事件处理程序。

于 2011-12-15T04:37:27.683 回答
1

试试这个，

$("#example").live('click',function(){
   alert("You clicked me!");
});
于 2011-12-15T04:34:00.777 回答
1

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

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

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

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

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

二是直播。以下内容将替换您当前的点击#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. 但这有点难看，因为您需要调用该函数两次。

于 2011-12-15T04:34:20.937 回答
1

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

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

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

于 2011-12-15T04:36:25.660 回答
0

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

于 2011-12-15T04:33:47.937 回答
0

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

$("#main").on("click", "#example", function() {
    alert("You clicked me!");
});
于 2011-12-15T04:44:33.983 回答