Question

我有一个页面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无效。为什么呢？

Answer 1

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

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

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

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

注意！

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

Answer 2

Live已弃用。你应该使用。

$（文件）.on（“点击”，“按钮”，功能（）{

是on的实时/委派格式。

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

Answer 3

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

所以在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>

Answer 4

正确检查您在代码中为jquery指定了正确的路径。这可能是代码无效的原因.....

Answer 5

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

我已经包含了jquery.hotkeys-0.7.9.min.js 它掩盖了我的掩饰。

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

：）

jQuery函数不能处理AJAX加载的内容

5 个答案:

注意！