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将再次在同一页面上发出，从而导致相同的事件处理程序相乘。

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

通过向页面div添加data-dom-cache="true"来缓存外部网页。这样可以防止删除页面。
仅使用pagecreate而不是.one()收听.on()，并在该阶段添加听众。
```
$(document).one("pagecreate", ".selector", function ()
```

Answer 2

并不是删除处理程序，而是使用文档中的委托处理程序。我认为更简单的解决方案是完全删除pagecreate处理程序并执行

 $( "body" ).on('click', '.edit-msg-groups 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"));
 });

这样您可以使用单个处理程序而不是2。

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

2 个答案: