Question

这可能很容易，但我搜索了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中的项都可以有自己的标记集。所以我想在每个按钮上添加一个click事件，打开一个对话框，使用这个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错误。谁能发现我可能做错了什么？这是我正在尝试做的图片：

enter image description here

Answer 1

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

即使DOM中没有按钮，以下内容也总是评估为真：

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

相反，请使用：

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

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

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

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

Answer 3

好的，我有了

autoOpen：false

虽然应该设置为true。

* 拍前额 *

使用jQuery将事件添加到同一类的所有按钮

3 个答案: