jquery - jQuery ajax 作用域和 dom 操作

Question

我有一个 js 文件（在页眉中调用），其中包含一些在名为 admin.js 的 CMS 的每个页面上运行的代码。它包含一些使用 jQuery 文件上传插件处理文件上传的代码。

我正在 CMS 中构建一个小部件系统。它使用引导模式。如果我将文件上传表单放在模式中，文件上传工作正常，但如果我在模式中使用 ajax 加载表单，文件上传插件不会触发。

modal 和 ajax 的代码是这样的：

$('#widget').on('show', function (event) {
    var page_id = $('#widget').data('modal').options.page_id;
    var widget_id = $('#widget').data('modal').options.widget_id;
    $.ajax({
        url: ADMIN_INCLUDES_URL + 'widget/widget.php',
        dataType: 'html',
        type: 'POST',
        async: false,
        data: {
            'page_id': page_id,
            'widget_id': widget_id,
            'action': 'form'
        },
        success: function(r){
            $('#widget').html(r);
        }
    });
});

我不想复制文件上传js代码。我正在使用 .on() 并且我也尝试过 .live() 但都不起作用？

Answer 1

试试这个，您需要使用在任何 ajax 调用之前存在的容器并将动态元素绑定到该容器

例如 - 这会将点击事件绑定到现在和将来的任何 .click 元素，它是 #widget 的子元素

$('#widget').on('click', '.click', function(){ console.log('clicked');});