0

コードに小さいながらも奇妙な問題があります。基本的に、呼び出されたときに関数を実行してリストを表示するページがあります。

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」の場合は1つのリストを表示し、それ以外の場合は他のリストを表示します。

リスト上の項目の1つをクリックするとトリガーされる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」ボタンをクリックすると、テキストボックスにあるテキストがコンソールに出力されます。

問題は、ボタンを数回クリックした後にポップアップを閉じて再度開くと、次にボタンをクリックしたときに大量のエントリが出力されることです。

私は自分自身を十分に明確にしていることを願っています。

前もって感謝します。:)

4

2 に答える 2

1

問題は、#newadmin をクリックするたびにイベント ハンドラーを追加していることです。

#newadmin をクリックするまで保存ボタンが表示されない場合は、スコープ外の 2 番目のイベントを取得し、より高いセレクターを指定します。

$("#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);
    })
于 2012-11-07T17:36:47.900 に答える
0

イベントをネストしています..内側のクリックイベントを外側に移動します..また、要素を動的に追加しているようです..したがって、静的な親コンテナにイベントをアタッチして、このようなイベントを委任します。

$("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);
    })
于 2012-11-07T17:38:09.297 に答える