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

• 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

3 Answers 3

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.