jQuery .submit не вызывается?

#javascript #jquery #ruby-on-rails

#javascript #jquery #ruby-on-rails

Вопрос:

У меня есть следующая функция, которая должна вызываться после формы, которую я отправил (этот метод в моем application.js папка в моем приложении rails):

 var addToTopics = function() {
    var result = "";
    var checkedTopics = $(".topic-checkbox:checked");
    $.each(checkedTopics, function(i, topic) {
        if(i == 0) {
            result = result   $(topic).attr('value');
        }
        else {
            result = result   ", "   $(topic).attr('value');
        }
    });
    return resu<
};


$("#new_comment").submit(function() {
    var ListOfTopics = addToTopics();
    $('#comment_topics').val(ListOfTopics);
    alert($('#comment_topics').val());
    return true;

});
  

HTML

 <form method="post" id="new_comment" class="new_comment" action="/comments" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="8vLhtuco TAkeB 9kQ0gERvA54BD/BnjJuguWxuXWHQ=" name="authenticity_token"></div>


          <div class="field">
            <label for="comment_comment">Comment</label>
            <br>
            <textarea rows="20" name="comment[comment]" id="comment_comment" cols="40"></textarea>
          </div>
          <div class="field">
            <input type="hidden" value="28" name="comment[review_id]" id="comment_review_id">
          </div>
          <div class="field">
            <input type="hidden" value="1" name="comment[user_id]" id="comment_user_id">
          </div>
          <div class="field">
            <input type="hidden" value="" name="comment[topics]" id="comment_topics">
          </div>
          <div class="actions">
            <input type="submit" value="Create Comment" name="commit" id="comment_submit">
          </div>
</form>
  

Но, похоже, это не вызывается, так как предупреждение dosent даже отключается, когда я отправляю свою форму.

Есть идеи, почему? Спасибо

Комментарии:

1. не могли бы вы, пожалуйста, опубликовать свой html-файл, а также функцию addToTopics().

2. @Sean Пожалуйста, опубликуйте отрисованный HTML-код, а не исходный код.

3. Есть ли у вашей кнопки отправки name =’отправить’? Это нарушило бы работу вашего метода submit().

4. можете ли вы опубликовать свой html-код, связанный с приведенным ниже кодом $ («#new_comment») // new_comment html, пожалуйста

5. Добавлен отрисованный HTML-код

Ответ №1:

Вам нужно убедиться, что код, подключающий прослушиватель, запускается после того, как форма была отображена в dom. это один из способов сделать это:

 $(function() {
  $("#new_comment").submit(function() {
    var ListOfTopics = addToTopics();
    $('#comment_topics').val(ListOfTopics);
    alert($('#comment_topics').val());
    return true;
  });
});
  

Комментарии:

1. Отлично сработало, спасибо! Могу я просто попросить вас объяснить, что происходило раньше и как это теперь исправлено, добавив $(function(){....} пожалуйста, если вы не возражаете? Спасибо

2. Добавляя оболочку $(function() {}), вы указываете jQuery выполнять код только после завершения загрузки всей страницы. В тот момент, когда будет выполнен $ («#new_comment»), он сможет его найти.

Ответ №2:

был ли добавлен элемент с идентификатором new_comment в dom до того, как вы запустили $(«#new_comment»).submit(функция(){…});

Если нет, то $ («#new_comment») не вернет никаких выборок, и jquery автоматически завершится ошибкой.

Комментарии:

1. Если я правильно понимаю ваш вопрос, то да, я уверен, что он был загружен раньше. Как еще я мог бы отправить форму, если она еще даже не отправлена?

2. Думаю, теперь я понимаю, что вы имеете в виду, запускается ли файл javascript до того, как форма комментария появится в dom? Я думаю, что это так, могу ли я гарантировать, что функция subit загружается только после загрузки документа?

Ответ №3:

вчера у меня была такая же проблема, моя проблема заключалась в несвязанной ошибке javascript на странице добавить простое предупреждение над этой строкой

 $("#new_comment").submit(function() {
  

для проверки (или проверьте консоль js вашего браузера)

Ответ №4:

Попробуйте изменить $ («#new_comment»).submit(функция() на $ («#comment_form»).submit(функция(), из того, что я вижу в вашем коде, эти два селектора не совпадают. Надеюсь, это поможет. Приветствия

И поскольку у вас в форме есть атрибут action «action = ‘/Comment'», либо удалите его, если у вас нет веской причины, по которой он у вас есть, либо предотвратите поведение по умолчанию, которое заставит форму перенаправлять на ваш текущий URL /Comment

Таким образом, код будет выглядеть следующим образом :

 $("#comment_form").submit(function(evt) {
    evt.preventDefault();
    // rest of function below
}); 
  

Комментарии:

1. Я пытался присвоить ему значение $ («#comment_form»), но все еще не работает. Однако я не понимаю, что вы имеете в виду под действием?