5

这可能很容易，但我已经搜索过 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 错误。谁能发现我可能做错了什么？这是我正在尝试做的事情的图片：

在此处输入图像描述

4

4 回答 4

3

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

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

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

相反，使用：

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

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

$(".select-tag").click(function (e) {
    showTagDialogBox();
    e.preventDefault();
});
于 2012-07-25T01:17:03.657 回答
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();
});
于 2012-07-25T01:28:11.790 回答
1

好的 - 我有

自动打开：假

而它应该被设置为true。

*拍打额头*

于 2012-07-25T08:52:55.960 回答
0

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

@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>
}
于 2022-02-11T17:32:21.770 回答