1

了解しました。Facebookスタイルのチャットを作成しています。しかし、それは実際には問題ではありません。

ここを参照してください：http： //jsfiddle.net/SkHme/7/

素敵でかわいいですよね？さて、問題があります。この行に注意してください：

<div class="conversation EmperorCuzco" onclick="setActive('EmperorCuzco')">

onclick属性を見ますか？まあ、それは機能していません。ただし、関数自体が機能することを確認しました。（JavaScriptでそのように実行すると、夢のように実行されます）onclick値を単純なものに置き換えようとすることで、関数が問題ではないことをさらに確認しましたが、それも機能alert('blah')しません。

元気？私のJavaScriptの何かが何らかの形で何かを無効にしていると推測していますが、それが何であるか、またそれを修正する方法もまったくわかりません。Web検索を行いましたが、役立つものが見つかりませんでした。

どうしたの？

4

2 に答える 2

3

setActive関数はハンドラーのスコープ内で定義されます$(document).ready。関数をその関数の外に移動して、グローバルスコープ内に配置します。

現在、次のようになっています。

$(document).ready(function()
{
    // ...
    function setActive(new_conversation)
    {
        // ...
    }
});

次に、これを次のように変更します。

$(document).ready(function()
{
    // ...
});

function setActive(new_conversation)
{
    // ...
}

ただし、実際には、コンテンツをインタラクションから分離し、それらのイベントハンドラーをスクリプト自体にバインドする必要があります。何かのようなもの：

// Refers to the last clicked conversation *button*
// Initialize to empty jQuery object
var $active_conversation = $([]);

// Binding on #chat, targeting click events on .conversation_button children
$("#chat").on("click", ".conversation_button", function() {
    // Hide currently active conversation
    $active_conversation.hide();
    $active_conversation.siblings('.conversation_button').removeClass("selected");

    // Set as currently active conversation button
    // Note: this refers to the clicked <div class="conversation_button">
    var $this = $(this);
    $active_conversation = $this.siblings('.conversation');

    // Show this conversation
    $active_conversation.show();
    $this.removeClass("alert").addClass("selected");
});

このアプローチのいくつかの利点：

  • 会話ごとに異なるクラスは必要ありません。実際の会話DOM要素を（jQueryオブジェクトとして）に格納することにより、$active_conversation余分な処理を行うことなく会話を識別できます。
  • conversation新しいイベントハンドラーを割り当てずに、リストアイテム全体を追加および削除できます。上記のサンプルでは、​​すべての 要素のイベントハンドラーが.conversation_buttonのレベルで定義されています#chat。このバインディングメカニズムの詳細については、.on（または.delegate1.7より前の）を読んでください。

ここで、更新されたフィドルを持っています！:-)

于 2012-06-22T17:52:22.243 に答える
0

あなたが言うすべてが本当に真実である場合（悪い間違いが起こる）、これを作ることができる唯一のことは、使用する前にあなたのイベントを受け取る他のイベントハンドラーstopPropagation()またはreturn false;

実行できる簡単なチェックは、またはに置き換えonclickて、アラートが表示されるかどうかを確認することです。onmousedownonmouseup

于 2012-06-22T17:54:00.010 に答える