在复制页面时复制的监听器 - 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'页面,然后naviagate在其他地方,然后返回'#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,删除外部页面,但不删除任何绑定.

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

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

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

2. pagecreate使用.one()not 只收听一次.on(),并在该阶段添加监听器.

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