jquery - 使用 jQuery 为同一类的所有按钮添加事件

Question

这可能很容易，但我已经搜索过并尝试了一些建议，但没有一个起作用。我正在使用一个 MVC 编辑器模板，该模板有一个带有标准 html 按钮和其他字段的 div。当我将集合传递给模板时，它将使用唯一的 id 呈现集合中每个项目的字段。然后我想在单击任何按钮时打开一个对话框。这些按钮在编辑器模板中呈现如下:

@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

因此，如果我将包含 2 个对象的集合传递给编辑器模板，我会得到以下 html:

<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">

这看起来不错，并且为每个按钮提供了唯一的 ID。他们需要有一个唯一的 ID(我认为)，因为每个 div 中的项目都可以有自己的一组标签。所以我想使用这个 jQuery 向每个打开对话框的按钮添加一个单击事件(我也尝试过在选择器中包含其他类，并尝试不使用“按钮”):

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

这是渲染标签的 div:

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

这是 showTagDialogBox 函数:

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

但是，当我单击任何按钮时，什么也没有发生 - 我在 Firebug 中也没有收到任何 js 错误。谁能发现我可能做错了什么？这是我正在尝试做的事情的图片:

Answer 1

需要注意的两件事可以解释这里发生的事情:

即使 DOM 中不存在按钮，以下内容也始终会计算为 true:

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

相反，使用:

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

其次，根据您的按钮是否存在于表单元素中，页面可能会在对话框有机会出现之前将数据发送回服务器。为了防止这种情况，请在点击事件处理程序中使用 .preventDefault()，如下所示:

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