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