使用jQuery向同一类的所有按钮添加事件答案

【问题标题】：Add event to all buttons of the same class with jQuery使用jQuery向同一类的所有按钮添加事件
【发布时间】：2022-02-12 01:32:21
【问题描述】：

这可能很容易，但我已经搜索过 SO 并尝试了一些建议，但这些都不起作用。我正在使用一个 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 错误。谁能发现我可能做错了什么？这是我正在尝试做的图片：

【问题讨论】：

标签： jquery jquery-selectors mvc-editor-templates

【解决方案1】：

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

即使 DOM 中不存在任何按钮，以下内容也始终为 true：

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

改为：

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

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

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

【讨论】：

【解决方案2】：

即使不检查元素也可以这样做，因为如果页面上不存在该元素不会有问题，所以你可以这样做

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

但如果你想先检查一下，你可以试试这个

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

或（如果您使用的是最新版本的 jquery）

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

【讨论】：

我尝试了你的两个建议，但不幸的是它们都不起作用

【解决方案3】：

好的，我知道了

自动打开：假

而它应该设置为 true。

* 打额头 *

【讨论】：

【解决方案4】：

只是对您的标题的通用回答，即将点击事件添加到某个类的所有按钮：

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

【讨论】：