1

ドキュメントの準備ができたら、ポスト リクエストを介してサーバーからいくつかのデータをフェッチし、append によってタグとして HTML に入力します。そのタグをクリックすると、コメントテキストエリアが表示されます。documentセクションをクリックすると、テキストエリアが閉じます。ここでの問題は、テキストエリアにテキストを入力できないことです。内部をクリックすると、非表示になります。使ってみevent.stopPropagation()たけどダメ。

これが私のjqueryコードです：

$.post("/person/keywords/get/", function(data){
    for(i=0; i<data.length; i++)
    {
        count = count + 1;
        $(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
    }
});

$(".keywords-set").on('click', "[id^=keyword]", function(event) {
    event.preventDefault();
    i = $(this).attr("id");
    i = i.split('-').pop();
    $("#comment-"+i).show();
    return false;
});

$(".comment").click(function(event) {
    event.stopPropagation();                     
});

$(document).click(function() {
    $(".comment").hide();
});

完全な HTML および JavaScript コードについては、https ://gist.github.com/3024186 を確認してください。

jsfiddleでは機能していますが、私のローカルホストでは機能して いません。理由を教えていただけますか？

ありがとう！

アップデート

私もこれを試しました

$(".keywords_set").on('click', ".comment", function(event) {
    event.stopPropagation();
});

event.stopPropagation()ajax を介して更新された HTML 要素に対しては機能しません。しかし、通常の（すでに与えられている）要素に対しては機能しています。

4

2 に答える 2

2

これを行うとき：

$(".keywords_set").on('click', ".comment", function(event) {

要素「.keywords_set」でイベントをキャッチしていることを理解する必要があり、「.comment」を介してバブルアップしたかどうかを確認します。

これは、「.keywords_set」と「.com」の間に設定された他の「クリック」イベントもアクティブになることを意味します。

伝播を停止するか false を返すと、ドキュメントへの「.keywords_set」のバブリングのみが影響します。

あなたはこれを行うことができます：

$(document).click(function() {
   if($(".comment:hover").length==0){
      $(".comment").hide();
   }
});

編集: 返信: 「ねえ、そのコードは機能します。.comment.length に言及して、それについてもっと説明してもらえますか?」

jquery セレクターを実行すると、配列が返されます。したがって$(".comment")、クラス「.comment」ですべてのhtmlノードを実行すると、リスト[obj1、obj2、...、objn]で返されます

あなたがそうするとき、あなた$(".comment:hover")はjqueryに、現在マウスがその上にあるクラス「コメント」を持つ要素を選択するように求めています。によって返されるリストの長さが$(".comment:hover")0 より大きい場合、「.comment」のクリックからバブルをキャッチしたことを意味します。

false を返すか、伝播を停止することもできますが。（私は完全なコードをあまり見ていませんでしたが、あなたの場合、なぜそれが機能していないのかわかりません）

編集2：

私は完全なコードを読むのが面倒でした。ただし、コメントのクリック イベントを設定している場合、コメントはまだ存在しません。そのため、追加する新しいコメントはクリック ハンドラーによってキャッチされません。ajaxコールバック内に追加すると動作します:)

編集 3: もう 1 つ:

再定義しているクリックには停止伝播しかないため、副作用はありませんが、false を返す前に停止伝播を追加する必要があります。

$(".keywords_set").on('click', ".comment", function(event) {

実際には、他のすべてのコメントは、追加するクリック イベントの N 回処理され、複数回処理されるためです。

于 2012-06-30T15:33:29.610 に答える
0

post メソッドは非同期なので。$(".com") が存在する前にバインドしています。動く

$(".comment").click(function(event) {
        event.stopPropagation();                     
        });

後

$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');

動作するはずです。

于 2012-06-30T15:45:56.993 に答える