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:

Solution 1

Ok got it - I had

autoOpen: false

whereas it should have been set to true.

* slaps forehead *

Solution 2

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();
});

Solution 3

You can do it even without checking the element because if the element doesn't exist on the page it won't be a problem, so you can do it like

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

but if you want to check it first then you can try this

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

or (if you are using latest version of jquery)

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