jquery - スパン、jQuery を持つ同じで 2 つの異なる関数を呼び出す

Question

ちょっとした問題があります

td1. ユーザーが td をクリックすると関数が呼び出され、2. ユーザーがtd.

Jクエリ:

 if (jQuery(tr).find("td span").hasClass('drill_icon')) {
        console.log('DRILL DOWN : ');    
    } else {
        console.log('SELECT/UNSELCT : ');
    }

上記の jquery 条件付けを試しましたが、役に立ちませんでした。

ユーザーが td をクリックしたかどうか、またはユーザーが span をクリックしたかどうかを確認する方法を教えてください。 two を使用するtdと、簡単に見つけることができます。

<td title="Afghanistan" _colid="1" style="width: 95%; overflow: hidden;">Afghanistan<span class="right drill_icon"></span></td>

Answer 1

2クリック機能を使う

 $("span.drill_icon").click(function() {
   //span is clicked..
   spanClickedFunction();
   return false;  //to make sure td click is not called here..this stops the event and td handler won't be called;
});

$("tr td").click(function() {
   //td is clicked..
   tdClickedFunction();

});

function spanClickedFunction(){
  alert('span clicked');
}

function tdClickedFunction(){
  alert('td clicked');
}

Answer 2

$("table td span.drill_icon").click(function (e){
   alert('Clicked on span');
   e.stopPropagation(); // stops further propagation
});

$("table td").click(function (){
   alert('Clicked on td');
});

デモを見る

Answer 3

2つのクリックハンドラーを作成する必要があります。1つはTD用、もう1つはスパン用です。

$("td").click(function() {
    //code that executes when clicked in the td but not in span
});

$("td span.drill_icon").click(function(event) {
    //code that executes when clicked in the span

    //prevents that the click-event gets fired on the parent elements
    event.stopPropagation();
});

Answer 4

どうぞ

<script type="text/javascript">
    $(function () {

        $("td").click(function () {
            alert("click on td");
        });

        $("td span").click(function () {
            alert("click on span");
            return false;
        });
    });
</script>

注意すべき重要な点は、スパンクリックハンドラーでfalseが返されることです。これにより、イベントがDOMの親に伝播されなくなります。jqueryはこのことを行うevent.stopPropagation（）を呼び出すと思います。

あなたの例でテストするのは難しいと思います。

• _colidをidに置き換えます
• あなたのテキストはtdにあるので、スパンにテキストを追加します
• スパンに境界線を追加して（テスト用）、スパンが実際に終了する場所を確認できるようにします

Answer 5

Two options:

1. Hook up two handlers:

One for the span:

$("span.drill_icon").click(function() {
    // Do your thing here

    // Stop the event
    return false;
});

...and one on the td:

$("selector for td").click(function() {
    // Do the thing
});

If the click is on the span, that handler will get called first, and since it stops the event, the other handler won't get called at all.

Live Example | Source

2. Use one handler and do the check on click

Or use one handler but then seen whether the click was in the span:

$("selector for td").click(function(e) {
    // In the span?
    if ($(e.target).closest("span.drill_icon")[0]) {
        // Yes
    }
    else {
        // No
    }
});

Live Example | Source