Question

我熟悉JavaScript但是对jQuery很新，而且目前很丢失。我之前已经意识到这个问题，但我不清楚如何解决这个问题。我正在创建一个带有提交按钮的对话框。单击提交按钮时，它应指向函数'getUsername（）'。我在JavaScript中测试了代码并使其成功运行，但是无法通过jQuery对话框获得相同的结果。对话框显示，带有文本输入和提交按钮，但单击按钮不会产生任何结果。

这是html代码：

<body onload="showDialog()">
        <form id="usernameInput" action="" onsubmit="return getUsername()">
            <br><br>
             <input type="text" id="usernameBox" required>
             <input type="submit" value="Start chatting!">
         </form>
     </div>
</body>

这是脚本：

 function showDialog(){
        $(document).ready(function(){
        $( "form" ).dialog({
            open: function() {
            $( this ).find( "[type=submit]" ).hide(); },
            title: 'Enter username',
            width: 500,
            height: 300,
            modal: false,
            buttons: [{
                text: "Start chatting!",
                click: $.noop,
                type: "submit"
            }
            ]
        });

    });     
  }

Answer 1

因为提交按钮是在表单外部创建的，所以自动表单提交将不起作用

function showDialog() {
    $(document).ready(function () {
        $("form").dialog({
            open: function () {
                $(this).find("[type=submit]").hide();
            },
            title: 'Enter username',
            width: 500,
            height: 300,
            modal: false,
            buttons: [{
                text: "Start chatting!",
                click: function(){
                    $("form").submit()
                },
                type: "submit"
            }]
        });

    });
}

参见dom结构

DOM of the Dialog

演示：Fiddle

jQuery：无法使提交按钮起作用

1 个答案: