1

I have the following:

<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>

I want to bind the click method to the 'div' element , and when one of the child 'a' elements is clicked do separate things. I am trying to distinguish between them using the button text, but the following is not working:

$(function(){

$('#message').click(function(){

if($(this + ">a").is(":contains(OK)")) {

        console.log("OK!!");

How can I fix this?

7
  • What did you expect this + '>a' to do, exactly? Concatenating an object with a string is going to call toString() on the object, which will result in the string '[Object object]>a'. You might have tried $('> a', this) though. Aug 12, 2013 at 16:55
  • Why do you want to bind the click event to the div? Why not just bind 2 separate click events to the A elements
    – MikeD
    Aug 12, 2013 at 16:58
  • Why don't you hook up event listener for each anchors?
    – srijan
    Aug 12, 2013 at 16:58
  • I assume this contains div#message, so I thought $(this + ">a") might select the child of div#message that is an 'a' Aug 12, 2013 at 16:58
  • #David Thomas. I think yourmethod is deprecated
    – SoWhat
    Aug 12, 2013 at 17:01

4 Answers 4

3

Okay there are two ways of doing this:

.find(selector)

 if(this).find("a").is(":contains(OK)")) {

    console.log("OK!!");

OR

$(selector,context)

 if("a",this).is(":contains(OK)")) {

    console.log("OK!!");
2
  • 2
    You could also make use of .closest() and if you want you can also use the .parent(), .child(), .next() etc, to select elements relative to the element that was clicked.
    – jacqijvv
    Aug 12, 2013 at 17:04
  • Just an update to my previous comment, there is no child() selector, but rather a .children() selector and :nth-child() selector.
    – jacqijvv
    Aug 14, 2013 at 7:02
1

In javascript, this is essentially the context of the current function. In jQuery event callbacks, this is set to be the source element of the event - not the selector string, which is what you are treating it as.

Instead, you want to do a test like: if($("a", this).is(":contains(OK)")) {

This works because the second parameter to the jQuery selector is the context to search in, so you are only searching for the a tags under the source element of the click.

1

Binding the click element to the Div, then checking the text string of the A tags will make both events happen on every click. You want to bind 2 separate click events on each A tag. Add an ID to each A tag, then try this code

$('#okLinkID').click(function(){
  console.log("OK!!");
});

$('#cancelLinkID').click(function(){
  console.log("Cancel!!");
});
1

//Attaches only one listener to the #message div and listens for any 'a' element within it to be clicked.

$('a','#message').on('click',function(){
    var $this = $(this),
        btnText = $this.text();
    console.log(btnText); 
});

http://jsfiddle.net/YA7Ds/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.