1

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

不同之处在于searchForm最初打印在 HTML 中，而searchFormSPECIAL在用户单击按钮oooo时由 jQuery 附加。

我还设置了两个提交侦听器 $("#searchForm").submit(function(event)和$("#searchFormSpecial").submit(function(event)。第一个正在工作，第二个没有。

这是我的代码：

<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 无法识别附加形式。

提前致谢！

4

2 回答 2

2

看起来您正试图在实际创建表单之前绑定到 searchFormSPECIAL 提交操作。

尝试改变

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

到

$('#searchFormSPECIAL').on("submit", function(event){
于 2013-02-11T05:45:23.383 回答
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>
于 2013-02-11T05:56:52.860 回答