Question

我的代码有一个小但很奇怪的问题。基本上我有一个页面，当它被称为运行一个函数并显示一个列表。

function showlist (arg) {

var len = arg;
if (len == 0) {
    $('#adminlist').empty();
    $('#adminlist').append('<li>No records found!</li>')
    $('#adminlist').append('<li><a id="newadmin">Add New..</a></li>')
            $('#adminlist').listview("refresh");
} else {
    // some other list

};

};

该列表有一个if子句，如果＆＃34; lenght为0＆＃34;然后显示一个列表，如果其他东西显示其他列表。

我有一个Jquery Mobile Popup，它通过单击列表中的一个项目来触发。

$("#newadmin").on('click', function(event) {

    $("#adminname").val("");
    $("#popupNewAdmin").popup({overlayTheme: "a"});
    $("#popupNewAdmin").popup("open")

    $( "#save_new_admin_btn" ).on('click', function(){
        var newadminname = $("#adminname").val();
        var newadminnametrim = $.trim(newadminname);

        console.log('New Admin Name: ' + newadminnametrim);
    })

}）;

触发后，Popup会清除输入文本框，当我点击＆＃34; save_new_admin_btn＆＃34;按钮它在控制台上输出文本框中的文本。

问题在于，如果我关闭关闭并在单击按钮几次后重新打开弹出窗口，下次单击该按钮时会输出大量条目。

我希望自己足够清楚。

提前致谢。：）

Answer 1

问题是每次点击#newadmin

时都要添加一个事件处理程序

在范围之外取第二个事件，如果在点击#newadmin之前保存按钮不存在，则给它一个更高的选择器。

$("#newadmin").on('click', function(event) {

    $("#adminname").val("");
    $("#popupNewAdmin").popup({overlayTheme: "a"});
    $("#popupNewAdmin").popup("open")



});

$( document ).on('click', "#save_new_admin_btn",  function(){
        var newadminname = $("#adminname").val();
        var newadminnametrim = $.trim(newadminname);

        console.log('New Admin Name: ' + newadminnametrim);
    })

Answer 2

您正在嵌套您的事件..将内部点击事件移动到外部.. 此外，您似乎动态添加元素。所以通过将事件附加到静态父容器来委派此类事件。

$("body").on('click',"#newadmin", function(event) {

    $("#adminname").val("");
    $("#popupNewAdmin").popup({overlayTheme: "a"});
    $("#popupNewAdmin").popup("open")
});

$( "body" ).on('click',"#save_new_admin_btn", function(){
        var newadminname = $("#adminname").val();
        var newadminnametrim = $.trim(newadminname);

        console.log('New Admin Name: ' + newadminnametrim);
    })

Javascript保持重复输出

2 个答案: