jquery按钮和模态表单

当有人点击“编辑”按钮时，我试图创建一个表单。我遵循这个例子：

我有两个问题：

该按钮看起来像一个普通的html按钮。当我单击时，它会变成jquery按钮。然后我再次单击，对话框打开。显然，我只需要单击一次jquery按钮来打开对话框

“我的表单”显示在主页面上，当您单击“编辑”按钮打开对话框时。它不应该出现在主页上。它应该只存在于对话框中。但是从本教程中(http://jqueryui.com/demos/dialog/modal-form.html)我没看到他们把表格藏起来，所以我不知道他们是怎么做的

我的html表单：

<div id="dialog-form" title="Change camera settings">
        <form>
        <fieldset>
            <label for="camera_name">Camera Name</label>
            <input type="text" size="16" maxlength="32" name="camera_name" id="camera_nameid" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        </form>
</div>

---

您可能应该将js移动到edit方法之外，将editButton变成jQuery按钮。在进入编辑方法之前，您需要绑定

click（）

函数并将其声明为按钮

所有这些代码只有在您第一次单击按钮后才能运行。这就是为什么你会得到奇怪的功能

将其放在编辑功能之外的页面中：

$(function() {    

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Edit camera settings": function() {
            allFields.removeClass( "ui-state-error" );

        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

$( "#editbutton" )
    .button()
    .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

---

您可能可以保留

var js=jQuery.noConflict（）如果你真的需要它。您可能还想将edit onclick逻辑移动到
editbutton
的click方法中，但这取决于您真正想要做什么。
您可能应该将js移动到editbutton之外的jQuery按钮中。在进入编辑方法之前，您需要绑定
click（）
函数并将其声明为按钮

所有这些代码只有在您第一次单击按钮后才能运行。这就是为什么你会得到奇怪的功能

将其放在编辑功能之外的页面中：

$(function() {    

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Edit camera settings": function() {
            allFields.removeClass( "ui-state-error" );

        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

$( "#editbutton" )
    .button()
    .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

您可能可以保留
var js=jQuery.noConflict（）如果你真的需要它。您可能还想将编辑onclick逻辑移到
editbutton
的click方法中，但这取决于您真正想做什么。
谢谢您的回复。但是有了这个，我现在一点对话都没有了。我有一个表（使用php从DB填充），每行有一个编辑按钮。这将打开一个对话框，其中包含一个表单，该表单将把表中的当前值填充到表单中。然后有人可以编辑。这就是为什么我把一堆变量传递给编辑函数，这样我就知道了这些值。哎哟，我收回了。忘记将noConflict转换回。谢谢！谢谢你的回复。但是有了这个，我现在一点对话都没有了。我有一个表（使用php从DB填充），每行有一个编辑按钮。这将打开一个对话框，其中包含一个表单，该表单将把表中的当前值填充到表单中。然后有人可以编辑。这就是为什么我把一堆变量传递给编辑函数，这样我就知道了这些值。哎哟，我收回了。忘记将noConflict转换回。谢谢！
$(function() {    

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Edit camera settings": function() {
            allFields.removeClass( "ui-state-error" );

        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

$( "#editbutton" )
    .button()
    .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});