当dom从ajax更新时重新运行Javascript

概述我已经尝试了一段时间来解决我现在所遇到的这个问题,直到现在还没有用. 我有一个主html文件,其中包含一个菜单,通过ajax将内容加载到div.问题是加载的内容(巫婆有一个’下一个’按钮去…下一个动态加载页面)不起作用,所以我不得不重新调用我在父页面上运行的函数.显然这并没有那么顺利,因为点击了一些链接之后,我最终崩溃了超过3000个请求到相同功能的浏览器… 我怎样才能使函数重新运行,或者监听DO 我已经尝试了一段时间来解决我现在所遇到的这个问题,直到现在还没有用.

我有一个主HTML文件,其中包含一个菜单,通过AJAX将内容加载到div.问题是加载的内容(巫婆有一个’下一个’按钮去…下一个动态加载页面)不起作用,所以我不得不重新调用我在父页面上运行的函数.显然这并没有那么顺利,因为点击了一些链接之后,我最终崩溃了超过3000个请求到相同功能的浏览器…

我怎样才能使函数重新运行,或者监听DOM更改？而.on没有用.

主文件上的脚本：

var din = function () {    $('.dinMenu').on('click','a',function(event) {        event.preventDefault();        $('#dinContent').HTML('loading...');        var $this = $(this);        var module = $this.data("module");        var folder = 'modules/module_' + module + '/';        var href = $this.data("href");        var url = folder + href;        console.log(url);        $.AJAX({            url: url,type: 'GET',dataType: 'HTML',cache: false        }).done(function(data) {            $('#dinContent').HTML(data);        }).fail(function(jqXHR,textStatus,errorThrown) {            $('#dinContent').HTML("Error!! file is not loaded");        });    });    $(document).ready(function() {     din();    });

HTML：

... <li ><a href="#" data-href="child.HTML" data-module="1">link</a></li> ... <section  ID="dinContent" >   <!-- start panel specific content --> ...

和动态页面：

<footer >  <a  href="#" data-href="child.HTML" data-module="1">Next</a></footer><!-- end panel specific content --><script> din();</script>

如果我从“child.HTML”文件中删除脚本,当我按下下一步时没有任何反应.

解决方法 代替

$('.dinMenu').on('click',function(event) {

它将事件处理程序放在所有< li>上元素,将处理程序放在< body>上：

$('body').on('click','.dinMenu a',function(event) {

这样,即使重新加载菜单,事件处理程序仍将保持有效.换句话说,在AJAX重新加载后无需再次设置它.

总结

以上是内存溢出为你收集整理的当dom从ajax更新时重新运行Javascript全部内容，希望文章能够帮你解决当dom从ajax更新时重新运行Javascript所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。