Add event to all buttons of the same class with jQuery

Question

This might be easy but I've searched SO and tried some suggestions for this none of which work. I'm using an MVC Editor Template that has a div with a standard html button and other fields. When I pass a collection to the template it will render the fields of each item in the collection with unique ids. Then I want to open a dialog box when any of the buttons are clicked. The buttons are rendered as such within the Editor Template:

@model ProductViewModel
<span>
    <button id="btnSelectTags-@(ViewData.TemplateInfo.HtmlFieldPrefix)" class="sig-button ie-shadowed select-tag" type="button" title="Select tags..." style="margin-right: 10px">Select tags</button>
</span>
// other fields

So if I pass a collection with 2 objects to the Editor Template I get the html below:

<button title="Select tags..." class="sig-button ie-shadowed select-tag" id="btnSelectTags-Products[0]" style="margin-right: 10px;" type="button">
// other fields then next item:
<button title="Select tags..." class="sig-button ie-shadowed select-tag" id="btnSelectTags-Products[1]" style="margin-right: 10px;" type="button">

This seems fine and gives each button a unique id. They need to have a unique id (I think) as the item in every div can have its own set of tags. So I want to add a click event to each button that will open a dialog box, using this jQuery (I've tried including the other classes in the selector also and tried without "button"):

if ($("button.select-tag")) {
    $(".select-tag").click(function () {
        showTagDialogBox();
    });
}

Here's the div where the tags get rendered:

<div style="display: none">
    <div id="tagDialogBox" title="Add Tags">
        @Html.EditorFor(x => x.ProductViewModels)
    </div>
</div>

Here's the showTagDialogBox function:

function showTagDialogBox() {
    $('#tagDialogBox').dialog({
        autoOpen: false,
        title: "Select Tags",
        modal: true,
        height: 530,
        width: 700,
        buttons: {
            "Save": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    return false;
}

However when I click any of the buttons nothing happens - I don't get any js errors in Firebug either. Can anyone spot what I might be doing wrong? Here's a pic of what I'm trying to do:

Answer 1

Two things to watch out for that may explain what's going on here:

The following will always evaluate to true, even when no buttons exist in the DOM:

if ($("button.select-tag")) { }

Instead, use:

if ($("button.select-tag").size() > 0) { }

Secondly, depending on whether your buttons exist within a form element, the page may be posting data back to the server before the dialog has a chance to appear. To prevent this, use .preventDefault() within your click event handler as follows:

$(".select-tag").click(function (e) {
    showTagDialogBox();
    e.preventDefault();
});