jQuery ajax 作用域和 dom 操作答案

【问题标题】：jQuery ajax scope and dom manipulationjQuery ajax 作用域和 dom 操作
【发布时间】：2012-09-07 14:30:26
【问题描述】：

我有一个 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() 但都不起作用？

【问题讨论】：

我们应该会看到您的表单标记，以及您的文件上传插件。
尝试像这样将事件放在某个父级上：$('some_parent').on('click', 'element', function(){});
我尝试将它放入小提琴中，但很难提取。在此处演示：cms.bidibo.co.uk/admin 电子邮件：so@so.com 密码：密码转到页面 > 编辑页面 > 单击小部件上的编辑
我也尝试将此内容添加到模式和 ajax 响应中：
点击我
。而这个 js 在 admin.js 文件中。 $('.click').on('click', function(){ console.log('clicked'); });它适用于模态，但不适用于 ajax 响应。

标签： jquery dom scope

【解决方案1】：

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

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

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

【讨论】：