jQuery事件不适用于ajax加载的内容

小编典典

jQuery事件不适用于ajax加载的内容

ajax

下面的代码有效。如果有更好的方法，请告诉我。如果我使用通过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>

Test.html：

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

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

我们必须根据需要通过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>

Test.html：

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

阅读 234

2020-07-26

共1个答案

小编典典

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

您的代码应与此类似：

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

它不必是body，但是是准备好文档后不会加载的元素，它是 .heading 的父级。

2020-07-26