Add event to all buttons of the same class with jQuery

Viewed 16172

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:

enter image description here

4 Answers

Just a generic answer to your title, i.e. to add click event to all buttons of some class:

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            // Items that NEED to be set after the page is loaded.
            $('.some-class').on('click', 'button', function (event) 
            {
               event.preventDefault();
               someFunction();
            }
            // And so on.
        });

        //Items that DON'T NEED to be called on page load can be put outside document.ready. For eg:
        function someFunction() { // Some logic }
    </script>
}
Related