Кнопка отправки не работает при добавлении формы HTML с jQuery

У меня есть две формы HTML. Первый - searchForm и второй - searchFormSPECIAL.Кнопка отправки не работает при добавлении формы HTML с jQuery

Разница заключается в том, что searchForm получает первоначально печатались в HTML, в то время как searchFormSPECIAL дополнена JQuery при нажатии кнопки пользователь нажмет оооо.

Я также создал два представить слушателей $ ("# searchForm"). Представить (функция (событие) и $ ("# searchFormSpecial"). Представить (функция (событие). Первый из них работает, второй один не

Вот мой код:.

<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 не распознает форму добавляется

заранее спасибо

источник

2013-02-11 IvanJ

Вы должны связать событие щелчка, когда иерархия 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-11 05:56:52

не повезло с этим либо ... :( – IvanJ

@IvanJ: Я отредактировал свой ответ –

Похоже, вы пытаетесь связать действие searchFormSPECIAL, прежде чем форма была создана.

Try изменения

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

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

источник

2013-02-11 05:45:23 Armand

[На JQuery 1.7, метод .live() является устаревшим. Используйте **. On() ** для присоединения обработчиков событий.] (Http://api.jquery.com/live/) – peterm

@peterm спасибо, обновит мой ответ – Armand

К сожалению, это тоже не работает. Он по-прежнему использует HTML submit вместо того, что представляет jQuery. – IvanJ

Кнопка отправки не работает при добавлении формы HTML с jQuery

ответ

Смежные вопросы