2

私はJavascriptを使い始めたばかりで、さまざまなコードで同じ問題に何度も遭遇しました。あるタイプの要素を作成する関数と、そのタイプの要素で何かを行う関数があります。要素を作成した後で「何かをする」関数を呼び出す必要があることは明らかですが、呼び出すと、必要以上に実行されることになります。

これが私の問題の例です：

function rightClick(){
    $(".element").mousedown(function(e){
        switch (e.which){case 3: alert( $(this).attr("id") )};
    });
};

function doubleClick(){
    var counter = 0;
    $(document).dblclick(function(e){
        counter++;
        elementId = "element" + counter;
        $("#new_elements").append("<div class='element'"          +
                                   "id='"    + elementId + "'"   +
                                   "style='position:absolute;"   +
                                   "top:"    + e.pageY + ";"     +
                                   "left:"   + e.pageX + ";'>"   +
                                    elementId+ "</div>");
    rightClick();
});

この例では、4つの要素を作成し、最初に作成した要素を右クリックすると、1つではなく4つのアラートボックスが表示されます。作成した2番目の要素を右クリックすると、3つのアラートが表示されます。3番目：2つのアラート。4番目：1つのアラート。

誰かが私にこれが起こっている理由と、要素を右クリックするたびにアラートが1つだけ表示されるように修正する方法を説明できますか？

4

4 に答える 4

4
  1. バインディングは、イベントをDOM要素に関連付ける行為です。および同様のイベントは.mousedown、既存の要素にのみバインドされます。
  2. 呼び出すたびに、新しいイベントを現在のすべての要素rightClick()にバインドします。.element
  3. 関数を同じ要素に好きなだけバインドできます。そのため、関数が何度も呼び出されているのがわかります。
  4. 動的要素の場合、チェックアウト.onするか.delegate、次のように機能する必要があります。
jQuery.fn.on の例 
 $(document.body).on("mousedown", ".element", function(e) {
   if (e.which === 3) alert($(this).attr("id"));
 });
jQuery.fn.delegate の例 
 $(document.body).delegate(".element", "mousedown", function(e) {
   if (e.which === 3) alert($(this).attr("id"));
 });

これを一度だけ呼び出すと、大丈夫です。jQuery 1.7以降を使用していない場合は、.delegate()の代わりに使用することをお勧めします.on。

于 2012-05-14T21:21:09.180 に答える
1

DOMに要素を挿入するたびにイベントをバインドする必要はありません。.on動的に挿入される要素のイベントハンドラーをアタッチするために使用できます。

$(document).on('mousedown','.element', (function(e){
    switch (e.which){
            case 3: alert( $(this).attr("id") ); 
            break; 
    };
});

var counter = 0;
$(document).dblclick(function(e){
    counter++;
    elementId = "element" + counter;
    $("#new_elements").append("<div class='element'"          +
                               "id='"    + elementId + "'"   +
                               "style='position:absolute;"   +
                               "top:"    + e.pageY + ";"     +
                               "left:"   + e.pageX + ";'>"   +
                                elementId+ "</div>");
});
于 2012-05-14T21:24:05.987 に答える
0

同じハンドラーを数回追加していると思います。つまり、ボタンをクリックすると、アクションが同じ関数に再バインドされます。

于 2012-05-14T21:21:41.730 に答える
0

イベントハンドラーをクラス「.element」にバインドしました。これは、ページ上のクラス'.element'のすべての要素が、右クリックが発生したときにそのイベントを発生させることを意味します。

于 2012-05-14T21:22:04.013 に答える