21

下面的代码有效。如果有更好的方法请告诉我。如果我在通过 ajax 加载 test.html 的主页中使用 test.html 中存在的脚本内容。脚本不起作用。

<html> 
    <head>
        <script src='jquerylocation' type='text/javascript'></script>
    </head>
    <body>
        <div id='ajaxload'></div>
        <button class='test'>load content via ajax</button>
    </body>


    <script>
        $(function(){
            $('.test').on('click',function(){
                  $('#ajaxload').load('test.html');
            });            
        });
    </script>
</html>

测试.html：

    <h1 class='heading'>Page via AJAX</h1>

    <script>
        $(function(){
            $('.heading').on('click',function(){
                $(this).css('color','red');  
            });                          
        });
    </script>

我们必须通过 ajax 加载脚本以及通过 ajax 动态加载的内容才能按您的需要工作。但我觉得每次发送 ajax 请求脚本时都会加载内容和内容。但我发现只有这个解决方案。如果有人知道更好的解决方案，请回复。

例如，如果以这种方式更改代码，它将不起作用。

<html> 
    <head>
        <script src='jquerylocation' type='text/javascript'></script>
    </head>
    <body>
        <div id='ajaxload'></div>
        <button class='test'>load content via ajax</button>
    </body>


    <script>
        $(function(){
            $('.test').on('click',function(){
                  $('#ajaxload').load('test.html');
            });

            $('.heading').on('click',function(){
                $(this).css('color','red');  
            });                                   
        });
    </script>
</html>

测试.html：

    <h1 class='heading'>Page via AJAX</h1>
4

2 回答 2

60

这是因为您正在将事件绑定到文档准备就绪。您必须使用委托才能使其正常工作。喜欢上。这是因为 .header 在加载时不在页面上。所以没有附加任何事件。

您的代码应该看起来像这样：

$('body').on('click','.heading',function(){
     $(this).css('color','red');  
});

它不必是正文，而是在文档准备好后未加载的元素，它是.heading的父级。

于 2013-07-12T17:10:05.293 回答
-1

一种选择是在加载成功时初始化脚本：

$('.test').on('click',function(){
   $('#ajaxload').load('test.html',function(){
      $('body').on('click', '.heading', function(){
          $(this).css('color','red');  
      }); 
    });
 });
于 2014-04-22T19:17:47.840 回答