Question

我在一个巨大的弹出窗口中加载一个页面与ajax：

$("#operator").magnificPopup({
    delegate: 'a.edit',
    mainClass: 'mfp-fade',
    closeBtnInside: true,
    removalDelay: 300,
    closeOnContentClick: false,
    type: 'ajax',
    ajax: {
        settings: {
            url: 'index.php?p=staff/operators',
        }
    },
    callbacks: {
        elementParse: function() {
            this.st.ajax.settings.data = {
                operator_id: this.st.el.attr('data-id')
            }
        }
    }
});

在模态窗口中，我想在输入类型=＆＃34;文件＆＃34;

上触发一个触发事件

$('input[name^=\'upload\']').on('change', function() {
    $('#form-upload').remove();
    $('#staff').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

    $('#form-upload input[name=\'file\']').trigger('click');

    if ($('#form-upload input[name=\'file\']').val() != '') {

        $.ajax({
            /* upload file code */
        });
        ecc...
    });

但它并没有触发。此外，所有其他触发事件都不在大型弹出窗口内工作。

那么如何才能在巨型弹出窗口中获得触发事件？

Answer 1

当HTML由ajax加载时，你试图附加事件的tiem，元素不可用，所以没有附加任何内容。

您必须更改'.on（）'调用，以便选择包含弹出元素的元素，并使用过滤器以便仅处理name=upload的更改。像这样：

$('body').on('change','input[name^=\'upload\']', function() { ...

顺便说一句，为避免在javascript中转义字符，您可以交换单引号和双引号。所以你可以简单地使用这个过滤器：

'input[name^="upload"]'

或

"input[name^='upload']"

（请测试它们。我认为只有第一个有效）。

触发器事件在Ajax Magnific弹出窗口内不起作用

1 个答案: