0

(ここに jsfiddle を含めました: http://jsfiddle.net/CunUK/ )

これは jQuery の on および off メソッドの意図した動作ではないかと疑っていますが、何か不足している場合に備えて、さらに重要なことに、誰かが提案できる何らかの回避策がある場合に備えて、私は私がここで抱えているこの問題をキャストするつもりです：

1) 動的 (AJAX 挿入要素) の目的で、「on」メソッドを $(document) にバインドしています。

2) 各ボタン バインディングで一意のデータを渡しているため、それらを個別のバインディングに分けています。

$.fn.myButtonsFunction = function(event){
    // Do some stuff with event.data['foobar'],
    // Do some other stuff
    this.siblings("a").addBack().off("click.myButtons", myButtonsFunction);
}

$(document).on("click.myButtons", "a.foo-button", {foobar: uniqueValue}, myButtonsFunction);
$(document).on("click.myButtons", "a.bar-button", {foobar: anotherUniqueValue}, myButtonsFunction);

バインドされたすべてのボタンではなく、myButtonsFunction でターゲットにされた選択されたボタンだけの「クリック」バインディングを削除したいと思います。

以下は、ボタンが相互にどのように発生するかを示す HTML の例です。

<li class="container">
    <a href="#" class="foo-button">Foo Button</a>
    <a href="#" class="bar-button">Bar Button</a>
</li>
<li class="container">
    <a href="#" class="foo-button">Foo Button</a>
    <a href="#" class="bar-button">Bar Button</a>
</li>
<li class="container">
    <a href="#" class="foo-button">Foo Button</a>
    <a href="#" class="bar-button">Bar Button</a>
</li>

簡単に言えば、ボタンの 1 つのコンテナーのイベント ハンドラーを削除したいだけです (上記の要件 1 と 2 による制限に留意してください)。

4

1 に答える 1

1

委任されたイベントの使用、つまり$(document).on("click.myButtons", "a.foo-button", ...ハンドラーの使用に関する問題は、a 要素に直接関連付けられていません。つまり、1 つの a 要素からハンドラーを削除して、他の a 要素に残すことはできません。すべてのa要素からハンドラーを削除する必要があるかどうか。

あなたの場合、ハンドラーをa要素に直接リンクして、直接ハンドラーを使用する必要があります。次のコードは、あなたが達成したいことをしています:

$( function() {
    myButtonsFunction = function(event){
        // Do some stuff with event.data['foobar'],
        console.log( event.data['foobar'] );

        // Do some other stuff

        // Remove handlers in the same container
        $( event.target ).siblings( "a" ).addBack().off("click.myButtons", myButtonsFunction);

        return false;
    }

    $( "a.foo-button" ).on("click.myButtons", {foobar: 123}, myButtonsFunction);
    $( "a.bar-button" ).on("click.myButtons", {foobar: 456}, myButtonsFunction);
} );

ハンドラーはボタンに直接バインドされます。ボタンがクリックされると、クリックされたボタンと同じコンテナーにあるすべてのボタンからハンドラーが削除されます。

編集

以下のコードは、私が推測するように、意図した機能を反映しています。

$( function() {
    myButtonsFunction = function(event){
        // Do some stuff with event.data['foobar'],
        console.log( event.data['foobar'] );

        // Do some other stuff

        $( event.target ).siblings( "a" ).addBack().each( function( i, elt ) {
            $( elt ).removeClass( $( elt ).data( 'class' ) );
        } );

        return false;
    }

    $(document).on("click.myButtons", "a.foo-button", {foobar: 123}, myButtonsFunction);
    $(document).on("click.myButtons", "a.bar-button", {foobar: 456}, myButtonsFunction);
} );

私が行ったことは次のとおりです。各リンク要素にデータ属性を追加しました。このデータ属性には、リンクがクリックされた場合にリンク要素から削除されるクラス名が含まれています。クラスがリンクから削除され、後でリンクがクリックされた場合、ハンドラーは呼び出されなくなります。

編集2

多分もっときちんとした解決策：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( function() {
    myButtonsFunction = function(event){
        // Do some stuff with event.data['foobar'],
        console.log( event.data['foobar'] );

        // Do some other stuff

        $( event.target ).siblings( "a" ).addBack().removeAttr( 'data-delegate' );

        return false;
    }

    $(document).on("click.myButtons", "a[data-delegate=foo]", {foobar: 123}, myButtonsFunction);
    $(document).on("click.myButtons", "a[data-delegate=bar]", {foobar: 456}, myButtonsFunction);
} );

</script>
<li class="container">
    <a href="#" class="foo-button" data-delegate="foo">Foo Button</a>
    <a href="#" class="bar-button" data-delegate="bar">Bar Button</a>
</li>
<li class="container">
    <a href="#" class="foo-button" data-delegate="foo">Foo Button</a>
    <a href="#" class="bar-button" data-delegate="bar">Bar Button</a>
</li>
<li class="container">
    <a href="#" class="foo-button" data-delegate="foo">Foo Button</a>
    <a href="#" class="bar-button" data-delegate="bar">Bar Button</a>
</li>

これがさらに役立つことを願っています。

于 2013-10-29T20:06:00.333 に答える