javascript - twitter-bootstrap 按钮没有触发我的表单 .dialog()

Question

以下代码无需 Bootstrap 即可正常工作

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

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

$('<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 个按钮(来自“日历”而不是上面的“停止”，但它们都损坏了)。与错误版本的唯一区别是上面的 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')...

然后，在代码的下部将事件处理程序直接分配给 $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" );
});