javascript - 触发事件在 Ajax Magnific 弹出窗口中不起作用

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')
            }
        }
    }
});

在模态窗口内，我想在输入 type="file"上触发触发事件:

$('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 加载的，因此当您尝试附加事件时，该元素不可用，因此不会附加任何内容。

您必须更改“.on()”调用，以便它选择包含弹出元素的元素，并使用过滤器，以便仅由 name=upload 进行的更改处理。像这样的事情:

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

顺便说一下，为了避免 JavaScript 中的转义字符，可以交换单引号和双引号。所以你可以简单地使用这个过滤器:

'input[name^="upload"]'

或

"input[name^='upload']"

(请测试它们。我认为只有第一个是有效的)。