將事件添加到同一類的所有按鈕與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(); 
});