0

jQueryの関数に1つの問題があります。まず、私がやろうとしていることを説明します。

div内にp要素とinput要素の2つの要素があります。要素pは表示され、入力要素は非表示のままになります。ユーザーがp要素をクリックすると、入力要素が表示され（表示およびフォーカス）、p要素が非表示になります（非表示）。入力フィールドが表示されたときに、ユーザーが何かを入力してEnterキーを押すと、新しいli要素が追加されます。

これは私の現在のコードです：

function createFolder() {
    // Should be a clickable element
    $('#create p').click(function() {

        // Hide the p element
        $(this).hide();

        // Show and focus the createFolder (input field)
        $('#createFolder').show().focus();

        // If press a key inside input field
        $('#createFolder').keypress(function(event) {
            // If this key is "enter"
            if (event.keyCode == 13) {
                // Add a new li element inside menu
                $('#menu').append('<li class="expandable"><a href="#">' + $('#createFolder').val() + '</a></li>');
            }
        });

        // Focus out the input field
        $('#createFolder').focusout(function() {
            // Hide the input field element
            $(this).hide();
        });
    });
}

http://i.imgur.com/HZoDr.png

しかし、問題があります。p要素をクリックまたはフォーカスアウトすると（たとえば、3回クリック）、何かを入力してEnterキーを押すと、3つのli要素がメニューに追加されます。これはループのようなもので、クリック数をカウントしてフォーカスアウトし、何かを入力すると、その数の要素が追加されます。誰かがこれで私を助けることができますか？そして、可能であれば、なぜこれが起こるのか教えてください。

4

3 に答える 3

0

これを試して

var items = $('#menu').parent().children(".expandable").length;
if(items > 0){
//skip doing what you are doing.
}else{
$('#menu').append('<li class="expandable"><a href="#">' +  $('#createFolder').val() + '</a></li>');
}
于 2012-09-11T12:27:02.293 に答える
0 
 $('#menu').html('<li class="expandable"><a href="#">' +  $('#createFolder').val() + '</a></li>');
于 2012-09-11T12:29:06.907 に答える
0

このコードを呼び出すとき：

$('#createFolder').keypress(function(event) {
    // If this key is "enter"
    if (event.keyCode == 13) {
        // Add a new li element inside menu
        $('#menu').append('<li class="expandable"><a href="#">' + $('#createFolder').val() + '</a></li>');
    }
});

keypressその要素にイベントの新しいイベントハンドラーを追加します。重要な点は、jQueryが既存のイベントハンドラーを上書きしないことです。そのコードを呼び出すたびに、新しいイベントハンドラーが要素に追加されます。

また、そのコードは要素のclickイベントハンドラー内にあるため、<p>その要素をクリックするたびに、keypressイベントの追加のハンドラーが表示されます。3回クリックすると、3つのイベントハンドラーがあり、キーを押すとそれぞれが起動します。

最も簡単な解決策は、そのコードを移動して、要素keypressのイベントハンドラーの外部にイベントハンドラーをバインドすることです。click<p>

于 2012-09-11T12:35:51.280 に答える