Jquery Select button(s) inside div

Question

I would like to select a specific group of buttons that exist inside a DIV and assign their ID to a hidden field on the page but I cant for the life of me select the buttons inside the div.. Example fails below

SOURCE HTML

    <div id = test>
    <div class="ButtonGroupWrapper">                    
                    <img src="test.jpg" width="100" height="100" alt="thumbnail" />
                <input id="buttonID5" type="submit" value="Link" class="button" />
    </div>
    <div class="ButtonGroupWrapper">                    
                    <img src="test.jpg" width="100" height="100" alt="thumbnail" />
                <input id="buttonID6" type="submit" value="Link" class="button" />
    </div>
    </div>

Jquery selector fails

    $(".ButtonGroupWrapper").find(":button").click(function () {
        alert("hi there");
        return false;
    });

    $("#ButtonGroupWrapper input[type=button]").click(function () {
        alert("hi there");
        return false;
    });

    $("#ButtonGroupWrapper :button").click(function () {
        alert("hi there");
       return false;
    });

Answer 1

Putting a space looks for any .button class within your .ButtonGroupWrapper class. (NOTE: not any 'button', but anything with the code class="button" added to it)

$(".ButtonGroupWrapper .button").click(function () {
    alert("hello");
    return false;
});

In your HTML code the submit input has a 'class' of 'button'. It could actually be anything such as .strawberry or .mybutton or anything you like.

Alternative:

As you have an id wrapping the whole lot you could also target button within the id:

<div id ="test">
  <div>                    
    <img src="test.jpg" width="100" height="100" alt="thumbnail" />
    <input type="submit" value="Link" class="button" />
  </div>
  <div>                     
    <img src="test.jpg" width="100" height="100" alt="thumbnail" />
    <div class="button" />Just text</div>
  </div>
</div> 

And then your javascript could be:

$("#test .button").click(function () {
     alert("button class clicked");
    return false;
});

Remember you need to run this after the DOM has loaded, so best practice is to either write it at the end of the page or wrap it in your favourite onready function.

Answer 2

This will work:

$(".ButtonGroupWrapper").find(".button").click(function () {
    alert("hi there");
    return false;
});

Answer 3

Try:

$(".ButtonGroupWrapper").find(".button").click(function () {
        alert("hi there");
        return false;
});

Your first example fails because you're trying to target a class which is preceded by . not :. You may also be trying to target an element of type button but the element in question is of type submit.

Your second example fails because you're trying to select an input of type button when none exist (your target is type submit). An alternative would be input[type=submit].

Your third example fails for a similar reason to the first example failing in that it's looking for an element of type button.

See also http://api.jquery.com/button-selector/