1

私は、正常な動作である可能性があると思われる特有の問題がありますが、確認する必要があります。<li>このコードを使用して、ライブクリックイベントをいくつかの要素に接続しています。

$('li', $list).live("click", rightItemSingleClickEvent);

ここでは、ブランケットセレクターを使用して、同じライブクリックイベントを<li>$ list内のすべての要素に接続していることに注意してください。これは、順序付けされていないリストです。私はこのコードを一度呼び出します$(document).ready()。rightItemSingleClickEvent（）は、メソッドの上部にあるライブクリックイベントを実際に強制終了します。これは、クリックに関連付けられたアニメーションがあり、アニメーションの発生中にそれを強制終了して、クリックが重複しないようにしているためです。クリックを強制終了するコードは次のとおりです。

$(this).die("click");

アニメーションが完了したら、クリックイベントを再接続します。

$notesArea.fadeIn(function() {
    $listItem.live("click", rightItemSingleClickEvent);
});

このコードはすべて正常に機能しているようです。クリックするリストアイテムを選択すると、毎回正常に終了して再接続されます（これにより、アニメーション中の重複クリックが防止されます）。しかし、私の問題は、その1つのリストアイテム（<li>）だけを殺していると思うと、その1つだけでなく、すべてのリストアイテムを殺しているように見えることです。したがって、1つのリスト項目をクリックすると、その機能は引き続き機能しますが（クリックは可能です）、他のすべての項目はクリックできなくなります。<li>これは、すべてを一度にカバーする包括的なステートメントを介してライブクリックイベントを接続しているという事実と関係があるのだろうかと思います。

では、ライブイベントをそれぞれに<li>個別に接続する場合、単一のセレクターを使用してすべてを実行するのではなく、機能する可能性がありますか？<li>シングルでdie（）を呼び出すと、その兄弟もすべて殺されるのはなぜかわかりません。

任意の洞察をいただければ幸いです。ありがとう。

明確化： rightItemSingleClickEventのコードをもう少し投稿するように依頼されました。この関数は基本的に、ユーザーがリストアイテムをクリックしたときに何が起こるかを処理します。cssクラスを追加および削除して、クリックとクリック解除をシミュレートしています。また、クリックすると表示され、クリック解除すると非表示になる別のテキストボックスがあります。これは、ライブクリックイベントを再接続する前に完了する必要があるアニメーションです。また、ヘルパー関数を使用してクリックイベントを強制終了して接続していることも指摘しておく必要があります。また、handleNotes（）は、ユーザーがクリックを解除したときにテキストボックスのテキストを保存する関数であり、他にもいくつかのことを実行します。この問題に関連しています。しかし、もっと紛らわしいのですが、それでも私のコードは以下に掲載されています。

function rightItemSingleClickEvent(ev) {

var $target = $(ev.target); // what was clicked on the item
var $clickedItem = $('#' + $(this).attr('id'));

killItemClickEvents($(this)); // kill live click event to prevent extra clicks during animation

if ($target.is('a.ui-icon-circle-close')) { // if clicking remove icon, just remove the item

    removeItem($clickedItem, getLeftList());
}
else { // otherwise, handle click event

    if ($clickedItem.hasClass("ui-state-default")) { // UNCLICK BUTTON LOGIC (if button is clicked)

        handleNotes("hide", $clickedItem); // Hide notes box and store its contents in $(this)'s notes div
        $clickedItem.removeClass("ui-state-default").addClass("ui-state-active"); // unclick button
    }
    else { // CLICK BUTTON LOGIC (if button is unclicked)

        if ($clickedItem.siblings(".ui-state-default").attr('id') != undefined) { // if a button is already clicked
            // got some stuff to do with button that was already clicked
            var $prev_clickedButton = $clickedItem.siblings(".ui-state-default");

            handleNotes("store", $prev_clickedButton);

            // now unclick all buttons -- only one clickable at a time
            $prev_clickedButton.removeClass("ui-state-default").addClass("ui-state-active");

            handleNotes("toggle", $clickedItem);
        }
        else {
            handleNotes("show", $clickedItem); // Show notes box and populate it with $(this)'s notes
        }

        // then click the button that was clicked (by changing its css class)
        $clickedItem.removeClass("ui-state-active").removeClass("ui-state-hover").addClass("ui-state-default"); // click it
    }
}
}

更新： HTMLに書き込まれるときに、クリックイベントを各リストアイテムに個別に接続するようにコードを変更しましたが、同じ動作が引き続き維持されます。正直なところ、何が起こっているのかわかりません。ただし、包括的なライブ接続ステートメントがなくても、1つのリストアイテムでクリックイベントを強制終了すると、すべてのリストアイテムでクリックイベントが強制終了されます。そして、私のコードの中でライブクリックイベントを殺す場所は1つだけで、それは私が上に投稿した場所です。だから私は完全に途方に暮れています。

更新2：この問題を回避できなかったため、代わりに「：animated」状態をチェックするようにコードを変更し、ライブクリックイベントを強制終了して再接続するというアイデアを放棄しました。ただし、ライブクリックイベントを各リストアイテムに個別に割り当てた場合でも、1つのリストアイテムのkill（）がそれらすべてを強制終了する理由を知りたいと思います。

4

1 に答える 1

0

最初の問題は、ライブ イベントの割り当て方法です。

ライブ イベントは現在、セレクタに対して使用された場合にのみ機能します。

これは正しく動作しないことを意味します:

$('li', $list).live("click", rightItemSingleClickEvent);

しかし、これは

$('#'+$list.attr('id')+' li').live("click", rightItemSingleClickEvent);

ダイコールがすべての要素のイベントを強制終了する理由は、親要素に一度バインドされているためです。それを削除すると、それらすべてに対して削除されます。イベント委任 (.live()) を使用する主な理由は、複数ではなく 1 つのイベントのみをバインドするためです。

于 2009-11-29T19:09:05.070 に答える