1

2 つの HTML フォームがあります。1 つ目はsearchFormで、2 つ目はsearchFormSPECIALです。

違いは、ユーザーがボタンooooをクリックすると、 searchFormSPECIALが jQuery によって追加されるのに対し、 searchFormは最初に HTML に出力されることです。

$("#searchForm").submit(function(event)と$("#searchFormSpecial").submit(function(event)の 2 つの送信リスナーも設定しました。

これが私のコードです：

<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 階層が完全に構築されたら、クリック イベントをバインドする必要があります。コードを$(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 に答える