将事件添加到同一类的所有按钮与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中的项目都可以拥有自己的一组标签。所以我想一个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; 
} 

然而，当我点击任何按钮没有任何反应 - 我没有得到任何错误的js Firebug。任何人都可以发现我可能做错了什么吗？这里是什么，我试图做一个PIC：

Answer 1

确定了它 - 我有

的AutoOpen：假

，而它应该被设置为true。

* 拍打额头 *

Answer 2

有两点需要注意这一点也许可以解释这是怎么回事就在这里：

下面将始终为true，即使没有按钮在DOM存在：

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

相反，使用：

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

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

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

Answer 3

你可以做到这一点，即使没有检查元素，因为如果元素不存在于页面上它不会是一个问题，所以你可以不喜欢它

$(".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(); 
});