2

クリック可能な音楽のタイトルをdivに表示しています。クリックすると、さらに詳細な情報が表示されます。次に、クリック可能な div にもボタンがあります。ボタンをクリックすると。ボタンの機能を呼び出すのではなく、divの機能を呼び出しますか? これを解決する方法はありますか？ありがとうございました！

$("#myComList").append("<div id="+comListID+" class=listDiv> <p class=comTitle><? echo $row["compositionTitle"] ?>(<?echo $row["year"]?>)</p><button id="+comListID+"btn class=addNewArrBtn>Add new Arrangement</button> <p class=comOri>BY <? echo $row["OrigComposer"] ?></p> </div>");
        $('#'+comListID).click(function() {
              $(this).find("li").slideToggle('slow', function() {
            });
        $("#"+comListID+"btn").click(function(){
                addNewArr(comListID);
            });
4

3 に答える 3

5

それは「バブリング」と呼ばれます。ボタンはdiv内にあるため、ボタンを実行してからdivへのチェーンを上に移動します。ボタン関数内にevent.stopPropagation（）を追加します。

$("#"+comListID+"btn").click(function(event){
    event.stopPropagation();
    addNewArr(comListID);
});
于 2012-12-13T21:51:25.957 に答える
3

jQueryのドキュメントから：

デフォルトでは、ほとんどのイベントが元のイベント ターゲットからドキュメント要素にバブル アップします。途中の各要素で、jQuery は、関連付けられている一致するイベント ハンドラーを呼び出します。ハンドラーは、event.stopPropagation() を呼び出すことで、イベントがドキュメント ツリーのさらに上にバブルするのを防ぐことができます (したがって、それらの要素のハンドラーが実行されないようにします)。ただし、現在の要素にアタッチされている他のハンドラーはすべて実行されます。これを防ぐには、event.stopImmediatePropagation() を呼び出します。(要素にバインドされたイベント ハンドラーは、バインドされたのと同じ順序で呼び出されます。)

http://api.jquery.com/on/

したがってevent.stopPropagation()、div イベントの発生を停止するには、ボタン クリック ハンドラー内で呼び出します。

于 2012-12-13T21:52:41.540 に答える
2

コードを見なくてもあなたの質問は理解できると思います。それが聞こえる問題は、クリックイベントがバブリングまたは伝播することに起因します。以下は、試すコードのサンプルと、テストするフィドルへのリンクです。

<div id="testDiv" onclick="alert('Stop Clicking Me!');">
    <button type="button" onclick="function(e) { alert('You hit the button!'); e.stopPropagation(); }">Click Me!</button>
</div>

この関数では、：

e.stopPropagation();

クリックイベントがその親コン​​テナ（この場合は「testDiv」）までフィルタリングされ、クリックイベントもトリガーされるのを防ぎます。以下のjsfiddleでテストして、自分の目で確かめることができます。

テストフィドル

編集：

あなたの場合：

$("#"+comListID+"btn").click(function(e){
    addNewArr(comListID);
    e.stopPropagation();
});

クリック関数にイベントパラメータを追加し、親への伝播を停止します。

お役に立てれば。

于 2012-12-13T21:55:48.277 に答える