I have the following:

HTML

<div class="tab-pane" id="message">
      <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>

JavaScript

$('#message').click(function(){
    if($("a", this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } else if($("a", this).is(":contains(Cancel)"))  {
        console.log("im in cancel!!");
    }
});

This works fine when I hit the OK button and executes as expected, however when I hit cancel the code in OK is executed only. The cancel code never executes! What am I doing wrong?

I have the following:

HTML

<div class="tab-pane" id="message">
      <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>

JavaScript

$('#message').click(function(){
    if($("a", this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } else if($("a", this).is(":contains(Cancel)"))  {
        console.log("im in cancel!!");
    }
});

This works fine when I hit the OK button and executes as expected, however when I hit cancel the code in OK is executed only. The cancel code never executes! What am I doing wrong?

• javascript
• jquery

Share Improve this question Follow edited Aug 12, 2013 at 18:19 rink.attendant.6 46.5k6464 gold badges110110 silver badges157157 bronze badges asked Aug 12, 2013 at 18:13 user1592380user1592380 36.6k105105 gold badges314314 silver badges553553 bronze badges 2

• Why should it execute if a:contains('OK') still exists in a #message? – u_mulder Commented Aug 12, 2013 at 18:17
• 2 It never enter the else if since $("a", this) contains both OK and Cancel – zs2020 Commented Aug 12, 2013 at 18:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

this is the element the event is bound to. It's always #message, therefore $("a", this) will always be the both buttons. .is will scan both buttons to see if any of them contain "OK". The first one does, so it always goes to the 1st block.

You should be binding the events to the buttons themselves, not the entire div.

Detect clicks on a from #message, instead. this will bee the clicked <a>.

$('#message').on("click", "a", function(){
    if($(this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } 
    else if($(this).is(":contains(Cancel)"))  {
            console.log("im in cancel!!");
    }
});

JSFIDDLE

Fist, I noticed you have a missing closing div (</div>)

Just curious, why not do the following:

$("#OK").click (function() {
    console.log("im in OK!!");
});

$("#Cancel").click (function() {
    console.log("im in Cancel!!");
});

<div class="tab-pane" id="message">
    <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
    <a href="#message" id="OK" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
    <a href="#message" id="Cancel" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>
</div>

Cheers.