jQuery事件不适用于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>
彼得·拉斯穆森

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

您的代码应与此类似:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

.click()不适用于ajax加载的内容

来自分类Dev

.click()不适用于ajax加载的内容

来自分类Dev

长度不适用于ajax加载的内容

来自分类Dev

jQuery不适用于ajax返回的内容

来自分类Dev

jQuery Change函数不适用于Ajax内容

来自分类Dev

jQuery验证不适用于Ajax加载的表单

来自分类Dev

Jquery 函数不适用于 AJAX 加载的元素

来自分类Dev

jQuery事件不适用于id

来自分类Dev

jQuery事件不适用于id

来自分类Dev

jQuery不适用于按钮事件

来自分类Dev

jQuery .on不适用于动态内容

来自分类Dev

jQuery .on似乎不适用于AJAX

来自分类Dev

jQuery Validate不适用于AJAX

来自分类Dev

jQuery Validate不适用于AJAX

来自分类Dev

触发器不适用于通过Ajax加载的内容

来自分类Dev

带有箭头键的 Javascript 导航不适用于 AJAX 加载的内容输入

来自分类Dev

单击事件不适用于由 ckeditor、jquery 生成的动态内容

来自分类Dev

jQuery .on()委托事件处理不适用于通过局部视图加载的元素

来自分类Dev

document.addEventListener不适用于加载事件

来自分类Dev

为什么加载事件的addEventListener不适用于div?

来自分类Dev

RouteChangeStart和RouteChangeSuccess事件不适用于页面加载

来自分类Dev

RouteChangeStart和RouteChangeSuccess事件不适用于页面加载

来自分类Dev

mCustomScrollbar插件不适用于动态加载的内容

来自分类Dev

jQuery事件不适用于像表这样的ajax结果

来自分类Dev

事件不适用于通过Ajax放入的元素

来自分类Dev

即使使用.on和.delegate,jQuery也不适用于Ajax加载的元素

来自分类Dev

jQuery autoComplete组合框不适用于通过Ajax加载的新元素

来自分类Dev

jce弹出窗口不适用于ajax内容。在joomla

来自分类Dev

.destroy (backstretch) 不适用于 ajax 内容

Related 相关文章

热门标签

归档