jQuery：无法让提交按钮正常工作

我对JavaScript很熟悉，但是对于jQuery来说很新，而且现在非常失落。我意识到这个问题之前已经被问到过，但我不清楚如何解决这个问题。我正在用提交按钮创建一个对话框。当点击提交按钮时，它应该指向函数'getUsername（）'。我在JavaScript中测试了代码，并且成功地运行了它，但无法通过jQuery对话框获得相同的结果。对话框显示文本输入和提交按钮，但单击该按钮不会产生任何结果。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" 
      } 
      ] 
     }); 

    });  
    }

来源

2014-05-07 user2781042

其中是getusername ?? –

当然，按钮不会做任何事情，您将'$ .noop'作为它的'click'处理函数传递。 –

你隐藏了按钮'''$（this）.find（“[type = submit]”）.hide（）;''' – viyancs

因为提交按钮的形式建立，因此自动表单提交将无法工作

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

来源

2014-05-07 09:43:46

它的工作原理！非常感谢。 – user2781042

jQuery：无法让提交按钮正常工作

回答

相关问题