Twitter的引導按鈕不觸發我的形式.dialog（）

Question

下面的代碼工作正常，沒有引導

type="button" class="btn btn-primary btn-xs" 

東西在按鈕聲明。但是，當使用我得到一個很好的藍色按鈕，但它不會觸發任何東西。我包括javascript （我刪除了大部分的對話框處理代碼，因爲我甚至沒有獲得對話框），我有一個我在底部使用的簡單表單的例子。 （注意：「#form - 」+ tablename是一個包含3個按鈕，「add」，「edit」和「delete」的選擇列表。我只是想讓「add」立即工作，並且關閉對話框+表名）

$('<button type="button" class="btn btn-primary btn-xs">',{ 
    id:"opener-add-"+tableName, 
}).text('Add').appendTo("#form-"+tableName); 

$("#dialog-edit-"+tableName) 
    .dialog({ 
     open : function (event,ui){ 
      if ($("#dialog-edit-"+tableName).data("edit_flag") == true){ 
       init_edit_values(tableName,keyName); 
      } else { 
       init_create_values(tableName); 
      } 
     }, 
     autoOpen: false, 
     modal :true, 
     width : 800, 
     resizable : true, 
     dragable : true, 
     buttons : { 
      "Update": function() { 
      ........etc 
    }); 


$("#opener-add-"+tableName).click(function(e) { 
    // I dont even get this far 
    alert("well I got a mouse event"); 
    e.preventDefault(); 
    $("#dialog-edit-"+tableName).data("edit_flag",false); 
    $("#dialog-edit-"+tableName).dialog("open"); 
}); 

和形式之一的HTML

<div id="dialog-edit-Stops" title="Add/Edit Stop"> 
    <form id="dialog-edit-Stops-form"> 
     <input id="hibernateId" type=hidden><br> 
     Stop ID<input id="stopId" size=10 maxlength=10><br> 
     Code <input id="stopCode" size=30 maxlength=30><br> 
     Name <input id="stopName" size=30 maxlength=30><br> 
     Description<input id="stopDesc" size=30 maxlength=30><br> 
     URL <input id="stopUrl" size=30 maxlength=100><br> 
     Latitude <input id="stopLat" size=30 maxlength=100><br> 
     Longitude <input id="stopLon" size=30 maxlength=100><br> 
    </form> 
</div> 

這裏是選擇列表的形式產生的工作html和 - 我與「＃對話編輯」發我的3個按鈕（從日曆不停止上面，但他們都打破）。與錯誤版本的唯一區別是上面的引導類型和類的東西。

工作

<form id="form-Calendar"> 
    <select name="select-Calendar" id="select-Calendar"> 
     <option value="every_day">every_day</option> 
     <option value="not_friday">not_friday</option> 
     <option value="not_monday">not_monday</option> 
     <option value="not_saturday">not_saturday</option> 
     <option value="not_sunday">not_sunday</option> 
     <option value="not_thursday">not_thursday</option> 
     <option value="not_tuesday">not_tuesday</option> 
     <option value="not_wednesday">not_wednesday</option> 
    </select> 
    <button id="opener-add-Calendar">Add</button> 
    <button id="opener-edit-Calendar">Edit</button> 
    <button id="opener-delete-Calendar">Delete</button></form> 

不工作

<form id="form-Calendar"> 
    <select name="select-Calendar" id="select-Calendar"> 
     <option value="every_day">every_day</option> 
     <option value="not_friday">not_friday</option> 
     <option value="not_monday">not_monday</option> 
     <option value="not_saturday">not_saturday</option> 
     <option value="not_sunday">not_sunday</option> 
     <option value="not_thursday">not_thursday</option> 
     <option value="not_tuesday">not_tuesday</option> 
     <option value="not_wednesday">not_wednesday</option> 
    </select> 
    <button type="button" class="btn btn-primary btn-xs">Add</button> 
    <button id="opener-edit-Calendar">Edit</button> 
    <button id="opener-delete-Calendar">Delete</button> 
</form> 

Answer 1

非工作造成-HTML沒有ID：

<button type="button" class="btn btn-primary btn-xs">Add</button> 

因此，當你的代碼查找：

$("#opener-add-"+tableName) 

它不能找到它。現在

，我從來沒有添加一個id你想作爲第二個參數的方式：{id:"opener-add-"+tableName,}，但我想嘗試，而不是做這種方式：

$('<button type="button" class="btn btn-primary btn-xs">') 
    .attr('id',"opener-add-"+tableName).text('Add')... 

，看看是否有更好的成功。或者，它可能是更容易做到：

var $btn = $('<button type="button" class="btn btn-primary btn-xs">') 
     .attr('id',"opener-add-"+tableName).text('Add')... 

然後，在你的代碼下事件處理函數分配到$ BTN變量直接：

$btn.click(function(e) { 
    // I dont even get this far 
    alert("well I got a mouse event"); 
    e.preventDefault(); 
    $("#dialog-edit-"+tableName).data("edit_flag",false); 
    $("#dialog-edit-"+tableName).dialog("open"); 
}); 

Answer 2

爲什麼不使用情態動詞的引導？

http://getbootstrap.com/javascript/#modals