Question

我创建了简单的按钮：

<button type="button" class="btn btn-success link-accept" data-id="16">Accept</button>

与相应的听众：

$(document).ready(function() {

    $('.link-accept').on('click', function(event){
        console.log('accepted');
    });

});

一切正常。

然后我使用此功能在我的页面上引入了基于AJAX的动态（无刷，你命名）导航：

function ajaxLoadContent(pageurl){
    $('#content').addClass("grey");
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
        var title=$(data).filter('title').text();
        var keywords=$(data).filter('meta[name=keywords]').attr('content');
        var description=$(data).filter('meta[name=description]').attr('content');
        var mdlTitle=$(data).find('.mdl-layout-title').html();
        var content=$(data).find('#content').html();
        var scripts=$(data).filter('#scripts').html();

        document.title = title;
        $('meta[name=keywords]').attr('content', keywords);
        $('meta[name=description]').attr('content', description);
        $('.mdl-layout-title').html(mdlTitle);
        $('#content').html(content);
        $('#scripts').html(scripts);
        $('#content').removeClass("grey");
        window.scrollTo(0, 0);
        $(document).trigger("content-refreshed");
        console.log('triggered content-refresh');
    }});
}

现在我的听众还没有工作。我想这是关于动态刷新的事情。

我试过了：

听content-refreshed事件 - 它会触发，但我的侦听器在动态加载的页面内没有被捕获
将我的$(document).ready匿名函数的内容移至separete函数并在页面底部调用 - function is not defined。
我的$('.link-accept').on('click')内容被提取为单独的功能，并使用<button onclick="function()"> - function is not defined

我现在没有想法......如果动态加载，它看起来根本不会执行该代码。我该怎么办？我猜这里eval不是一个选项......

修改

我确定动态加载的javascript根本就没有运行。 console.log部分顶部的纯<script>也不起作用。所以我想我的主要任务是首先评估该代码 - 然后它应该正常工作。

Answer 1

将第一个代码段更改为：

$(document).on('click', '.link-accept', function(event){
    console.log('accepted');
});

它会起作用。

否则它将首先搜索所有.link-accept项，然后将处理程序一次附加到找到的对象。在你的ajax请求之后，什么都不会更新。

在我的代码片段中，它更具动态性。它将点击绑定到文档。如果单击文档上的任何对象，它将检查它是否为.link-accept元素。更有活力和更好的表现。

动态页面导航 - 未触发自定义事件

1 个答案: