イベントをjQueryに委譲する方法はありますか？

Question

delegateclickの場合はoneとします。それを行うことが可能かどうか誰にも分かりますか？

Answer 1

最初のクリックで完全にアンバインドするのではなく、PERの一致した要素を1回だけ発生させたいとします。

私はそうのようにそれを実装したい：

$('#container').delegate('.children', 'click', function() { 
    if($(this).data('clicked')) { 
     return; 
    } 

    // ... your code here ... 


    $(this).data('clicked', true); 

}); 

これは一度だけの要素ごとに発生します。技術的には、毎回起動しますが、コードが最初にクリックされるとフラグが立てられ、コードは再び実行されません。

.one（）ハンドラをシミュレートする際の固有の問題は、セレクタで一致した各要素が.one（）を使用することによって、独自のイベントハンドラにバインドされることです。したがって、初めて起動すると、その要素からハンドラをアンバインド/削除します。一致するすべての要素に対してSINGLEハンドラだけが使用されているため、.delegate（）でこれを行うことはできません。

上記のコードは完全にシミュレートしていますが、それは文字通り.one（）が（イベントハンドラのバインドを解除して）同じことをしないので、ややこしいことです。

Answer 2

私はそれを行うためのきちんとした方法があることを確認んだけど、それを行うための簡単な方法は、このようなものになるだろう：I以下のコメントのおかげで使用することを決めた：

<script> 
    $(document).ready(function(){ 
    $("#container").delegate('.clickers', 'click', function(){ 
     if($(this).data("clicked")==null){ 
     $(this).data("clicked", "true"); 
     $("#container").append($(this).html()); 
     } 
    }); 
    }); 
</script> 
<div class="clickers" clicked="false"></div> 
<div class="clickers" clicked="false"></div> 

EDITこれで、w3c標準のDOMを一掃することはできません。

Answer 3

この投稿は数年前のものですから、もっと現代的な読者（2015年）の完全な最新の例を提供したかっただけです。ロジックは、ここで他の回答と違いはありませんが、jQueryの方法は具体的に、2011年以来、進化している：jQueryの1.7、.delegate（のよう

を）.on（）メソッドに取って代わられています。 jQuery delegate()

// define output element 
 
var $output = $('div#output'); 
 

 
// attach delegated click handler 
 
$(document).on('click', 'button', function() { 
 
    
 
    // define clicked element 
 
    var $this=$(this); 
 
    
 
    // if this element has already been clicked, abort 
 
    if ($this.data('clicked')) { 
 
    return false; 
 
    } 
 
    
 
    // perform click actions 
 
    $output.append("clicked " + $this.html() + "<br />"); 
 
    
 
    // mark this element as clicked 
 
    $this.data('clicked',true); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>One</button> 
 
<button>Two</button> 
 
<button>Three</button> 
 

 
<div id="output"></div>