jquery - 重新访问页面时监听器重复 - Jquery Mobile

Question

我有一个包含很多页面的 jQM 应用程序，我正在将其移至 jQM 1.4。我正在使用 1.4 中建议的新小部件/方法，删除所有已弃用的代码。

考虑一个包含以下代码的页面:

$(document).on('pagecreate', '#admin-edit-location', function(event, ui) {
        $('.edit-msg-groups', this).on('click', 'a', function () {
            $('<div class="ui-input-text ui-body-inherit ui-corner-all ui-mini ui-shadow-inset"><input type="text" name="message_group[]" placeholder="Pool, Classes etc." data-mini="true"></div>').insertBefore($(".mg-btn-add"));
        });
});

如果我转到“#admin-edit-location”页面，然后导航到其他地方，然后返回“#admin-add-location”页面并单击该按钮...它会插入 div 两次。如果我再次离开该页面并稍后返回，则单击它插入的按钮 3 次等..

我正在寻找防止这种情况发生的方法。我将所有页面都放在单独的文件中。

编辑:点击事件的示例代码

$(document).on("pagecreate", "#view-wellness-tips", function (){
    var container = $('#admin-errors');
    $("#add_wellness_tip_form").validate({
        errorContainer: container,
        errorLabelContainer: $("ul", container),
        wrapper: 'li',
        meta: "validate",
        errorPlacement: function(error, element) {
            error.insertAfter($(element).parent());
        }
    });

    $('#add-new-tip').off('click').on('click', function (event) {
        var valid = $("#add_wellness_tip_form").valid();

        if(valid) {
            $('#add-tip').popup("close");
            $.mobile.loading("show");
            $.post("admin.php?v=wellness&x=add", $('#add_wellness_tip_form').serialize() , function(data) {
                $.mobile.loading("hide");
                if(data == 1) { //success
                    jqmRedirect("/admin.php?v=config&t=wellness-tips&newtip=true");
                } else { //fail
                    displayMessage(data);
                }
            });
        }
    });
});

jqmRedirect:

function jqmRedirect(url){
var transitions = Array('slide', 'slideup', 'slidedown', 'pop', 'fade', 'flip', 'turn', 'slidefade');
var transiton = transitions[Math.floor(Math.random()*transitions.length)];

if(url == "reload"){
    $.mobile.changePage(window.location.href, {
        transition : transiton,
        reverse : false,
        changeHash: false,
        allowSamePageTransition : true,
        reloadPage:true
    });
} else {
    $.mobile.changePage(url, {
        transition : transiton,
        reloadPage:true
    });
}

}

Answer 1

由于您使用的是单页面模型，页面通过 Ajax 加载，然后在隐藏时删除。 jQuery Mobile，删除外部页面，但不删除任何绑定(bind)。

当您再次显示页面时，它会再次通过 Ajax 加载并完成页面创建过程。因此，pagecreate 将在同一页面上再次发出，从而导致相同的事件处理程序成倍增加。

要解决此问题，您有两种选择:

1. 通过将 data-dom-cache="true" 添加到页面 div 来缓存外部页面。这将防止页面被删除。

2. 仅使用 .one() 而不是 .on() 监听 pagecreate 一次，并在该阶段添加监听器。

   $(document).one("pagecreate", ".selector", function ()