Question

好的，所以在这个项目上，我的设置有点复杂。这是一个Phaser 3游戏。我将所有脚本加载到html文件的标题中。 window.onload调用App.start()，它配置并加载Phaser和场景。在标题场景类中，我进行了ajax调用，并检索了一个html模板，该模板随后以模式显示。我似乎无法处理生成的工作模式中的事件。我尝试过：

$('#loginForm').on('submit', (event) => {
    event.preventDefault();
    let values = $('#loginForm').serialize();
    console.log(values);
}

和

 $(document).on('submit', '#loginForm', (event) => {
     event.preventDefault();
     let values = $('#loginForm').serialize();
     console.log(values);
}

，以及尝试绑定到实际的提交按钮。使用我尝试过的所有方法，页面都会重新加载，并以获取提交的形式处理表单（将值附加到URL）。请注意，尚未设置表格的action或method；仅id。

我该如何捕获提交事件？

编辑：添加代码

App.js

let App = function() {};
App.prototype.start = () => {
    let scenes = [];
    scenes.push(Loading);
    scenes.push(Title);
    scenes.push(Start);

    let config = {
        type: Phaser.AUTO,
        width: 900,
        height: 600,
        parent: 'gameDiv',
        scene: scenes
    };

    let game = new Phaser.Game(config);

    ...
};

Title.js（当前测试）

class Title extends Phaser.Scene {
    constructor(){
        super({key: 'Title'});
    }

    preload(){}

    create(){
        let _t = this;

        let btnLogin = this.add.sprite(300, 350, 'login');
        let btnRegister = this.add.sprite(570, 350, 'register');
        let logoText = this.add.bitmapText(80, 100, 'Lombardic', 'Dragon Court', 108);

        btnLogin.setInteractive();
        btnRegister.setInteractive();

        btnLogin.on("pointerdown", (pointer) => {
            DC.templateCall('user', 'mode=login_tpl', () => {
                DC.templateFormHandler('loginForm', (event) => {
                    event.preventDefault();
                    let loginData = $("#loginForm").serialize();
                    console.log(loginData);
                    /*
                    modal.close();
                    Ajax.call('user', params, (result) => {
                        if(result.status){
                            _t.scene.start('Start', { fr: result.data.first_run, hc: result.data.has_char });
                        }else{
                            DC.modal('LoginError', '<div>'+result.error+'</div>', () => {});
                        }
                    });
                    */
                });
            });
        });
    }
}

templateFormHandler函数：

templateFormHandler: (id, callback) => {
    $("#"+id).on("submit", callback);
}

Answer 1

我仍然找不到上述代码无法正常工作的正当理由，但是作为一种解决方法，我只是将处理程序移至模板文件本身，并且一切正常。我想这是范围问题。

在ajax模态中捕获事件

1 个答案: