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

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/