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

我已经尝试了一段时间来解决我现在所遇到的这个问题,直到现在还没有用.

我有一个主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 class="dinMenu"><a href="#" data-href="child.html" data-module="1">link</a></li>
 ...
 <section class="panel content" id="dinContent" >
   <!-- start panel specific content -->
 ...

和动态页面：

<footer class="subnav clearfix dinMenu">
  <a class="button next right" href="#" data-href="child.html" data-module="1">Next</a>
</footer>
<!-- end panel specific content -->
<script>
 din();
</script>

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

解决方法:

代替

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

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

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

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