Question

以下代码在没有引导程序的情况下正常工作

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

按钮声明中的内容。但是当使用时，我得到一个漂亮的蓝色按钮，但它不会发射任何东西。我包含了javascript （我删除了大部分对话框处理代码，因为我甚至没有得到对话框），我有一个我在底部使用的简单表单的示例。（注意。“＃form - ”+ tablename是一个带有3个按钮的选择列表，“添加”，“编辑”和“删除”。我只是想让“添加”立即工作并开火我用“＃dialog-edit - ”+ tablename制作的对话框。）

$('<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>

这里是带有选择列表和我的3个按钮的形式的结果工作html（来自日历而不是上面的停止，但它们都会中断）。与错误版本的唯一区别是上面的bootstrap类型和类的东西。

工作

<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')...

然后，代码中的lower将事件处理程序直接分配给$ 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

为什么不使用modals bootstrap？

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

twitter-bootstrap按钮没有触发我的表单.dialog（）

2 个答案: