Javascript不断重复输出答案

【问题标题】：Javascript keeps duplicating outputJavascript不断重复输出
【发布时间】：2012-10-27 19:43:40
【问题描述】：

我的代码有一个小而奇怪的问题。基本上我有一个页面，当它被调用时，它会运行一个函数并显示一个列表。

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 子句，如果“长度为 0”则显示一个列表，如果是其他内容则显示另一个列表。

我有一个 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);
    })

});

触发时，弹出窗口会清除输入文本框，当我单击“save_new_admin_btn”按钮时，它会在控制台上输出我在文本框中的文本。

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

我希望我说得够清楚了。

提前致谢。 :)

【问题讨论】：

为什么要嵌套点击处理程序

标签： javascript jquery jquery-mobile

【解决方案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);
    })

【讨论】：

我没有尝试解决方案，因为我不得不离开工作。我试图理解嵌套事件处理程序的问题。你能解释一下为什么会出现这个问题吗？
在这种情况下，嵌套事件处理程序是一个问题，因为每次单击#newadmin 时，您都在运行“订阅”（添加另一个事件侦听器）到“#save_new_admin_btn”的单击事件的代码。因此，每次单击#newadmin 时，都会为#save_new_admin_btn 添加另一个事件处理程序。三下点击 = 运行第二个函数的三倍。

【解决方案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);
    })

【讨论】：