Question

我有两个HTML表单。第一个是 searchForm ，第二个是 searchFormSPECIAL 。

区别在于 searchForm 最初会在HTML中打印，而当用户点击按钮 oooo 时， searchFormSPECIAL 会被jQuery追加。

我还设置了两个提交监听器 $（“＃searchForm”）。submit（function（event）和 $（“＃searchFormSpecial”）。submit（function（event）< / em>。第一个是工作，第二个不工作。

这是我的代码：

<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $("#test_only").click(function () { $('body').append(commentFormSPECIAL()); }); function commentFormSPECIAL() { var comment_form_html = '<form action="/comment" id="searchFormSPECIAL">\ <input type="text" name="r" placeholder="Topic ID" />\ <input type="text" name="c" placeholder="Comment ..." />\ <input type="submit" value="Submit Comment" />\ </form>' return comment_form_html; //return ""; } $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); alert("Hey you are submitting searchForm") }); $('#searchFormSPECIAL').submit(function(event){ /* stop form from submitting normally */ event.preventDefault(); alert("Hey you are submitting searchFormSPECIAL"); }); </script> </head> <body> <div id="wrapper"> <form action="/new" id="searchForm"> <input type="text" name="s" placeholder="Topic..." /> <input type="text" name="l" placeholder="http://www.google.com" /> <input type="submit" value="Submit Topic" /> </form> <button id="test_only">ooooo</button> </div> </body> </html>

似乎jQuery没有识别附加形式。

提前致谢！

Answer 1

在实际创建表单之前，您似乎试图绑定到searchFormSPECIAL提交操作。

尝试更改

$('#searchFormSPECIAL').submit(function(event){

到

$('#searchFormSPECIAL').on("submit", function(event){

Answer 2

当浏览器完全构造DOM层次结构时，您应该绑定click事件。尝试将您的代码放入$(document).ready

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
        $(document).ready(function () {
          $("#test_only").click(function () {
              $('body').append(commentFormSPECIAL());
          });

          function commentFormSPECIAL() {
              var comment_form_html = '<form action="/comment" id="searchFormSPECIAL">\
              <input type="text" name="r" placeholder="Topic ID" />\
              <input type="text" name="c" placeholder="Comment ..." />\
              <input type="submit" value="Submit Comment" />\
              </form>'

              return comment_form_html;
              //return "";
          }

          $("#searchForm").submit(function(event) {
              /* stop form from submitting normally */
              event.preventDefault();
              alert("Hey you are submitting searchForm")
           });

          $(document).on('submit', '#searchFormSPECIAL', function (event) {
          /* stop form from submitting normally */
              event.preventDefault();
              alert("Hey you are submitting searchFormSPECIAL");
          });
     });
  </script>
</head>
<body>
    <div id="wrapper">
        <form action="/new" id="searchForm">
            <input type="text" name="s" placeholder="Topic..." />
            <input type="text" name="l" placeholder="http://www.google.com" />
            <input type="submit" value="Submit Topic" />
        </form>

        <button id="test_only">ooooo</button>
    </div>
</body>
</html>

使用jQuery附加HTML表单时，“提交”按钮无效

2 个答案: