3

我有一个页面index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Lufia</title>
    <script src="js/jquery.js" language="javascript"></script>
    <script language="javascript">

    $(document).ready(function() {
      $("button").click(function() {
        $('#mydiv').html( 'Loading... ').load('welcome.html');
        $(this).hide();
      });
    });

    </script>
  </head>
  <body>
    <button>ajax</button><div id="mydiv"></div>
  </body>
</html>

在此代码中，当单击按钮时midiv welcome.html加载并且按钮被隐藏。

welcome.html如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Lufia</title>
  </head>
  <body>
    <button>New Button</button>
  </body>
</html>

这个新按钮onClick不起作用。为什么？

4

5 回答 5

13

这里的简单解决方案 - 您需要使用 jQuery.live()函数为新按钮添加事件处理程序。

$("#newButton").live('click',function(){
  // Do stuff here
});

当您最初创建.click()处理程序时，第二个button还没有在 DOM 中，因此 jQuery 无法将事件处理程序附加到它。该.live()函数适用于 DOM 中已经存在的任何元素以及将来添加的任何元素（例如，来自 ajax 调用）。

您可能希望为您的新按钮（来自 ajax 调用）提供一个新的不同 ID，因为选择器$("button")将捕获您的两个按钮（即使一个按钮被隐藏）。

笔记！

从 jQuery 1.7 版本开始，该live()方法已被弃用！. 从 1.9 版开始，该函数将被完全删除...处理这些动态添加元素的事件处理程序的正确方法是现在使用该on()函数。

于 2012-04-15T12:19:41.960 回答
3

不推荐使用 Live。你应该使用。

$(document).on("click","button", function () {

是 on 的实时/委托格式。

http://api.jquery.com/live/

于 2013-06-20T06:48:57.640 回答
2

因为按钮没有绑定任何东西。

所以在welcome.html 中你必须添加代码来处理它。

或者; 您可以在函数中绑定 onclick 处理程序，然后在 ajax.done() 方法上将该处理程序绑定到新按钮。

最好的方法是执行以下操作：注意这根本没有经过测试。

<script language="javascript">
$(document).ready(function(){

var buttonClickEvent = function(){
  $.ajax({
     url: "test.html",
  }).done(function(results) { 
    $('#mydiv').html(results);
    $('button').live('click',buttonClickEvent);
  });
}

$("button").click(buttonClickEvent);

</script>

或者：

welcome.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Lufia</title>

<body><button>New Button</button>

<script>
 $(document).ready(function(){
    $("button").click(function(){
       //do something
    });
 });
</script>

于 2012-04-15T12:20:08.407 回答
0

正确检查您是否在代码中为 jquery 提供了正确的路径。这可能是代码不起作用的原因......

于 2017-04-23T10:12:09.790 回答
-1

这通常是因为包含的文件不正确。

我已经包含了 jquery.hotkeys-0.7.9.min.js 并且它混淆了我的掩饰。

经过 2 小时的代码检查后，当我删除了文件时。问题解决了；

:)

于 2012-04-30T15:48:23.397 回答