觸發事件在Ajax Magnific彈出窗口內不起作用

Question

我正在一個壯觀的彈出窗口vie 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加載的，因此通過嘗試附加事件的tiem，該元素不可用，因此不附加任何內容。

您必須更改您的'.on（）'調用，以便它選擇包含popup元素的元素，並使用過濾器，以便僅處理name=upload的更改。 像這樣：

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

順便說一句，為避免轉義javascript中的字符，可以交換單引號和雙引號。 因此，您可以簡單地使用以下過濾器：

'input[name^="upload"]'

要么

"input[name^='upload']"

（請測試一下。我認為只有第一個有效）。