@Fedor_PV

Почему JQuery не видит элемент DOM, загруженный Ajax-ом?

Здравствуйте. Я нуб и новичок, и не понимаю почему так происходит: есть страница, образно descriptions.html и есть страница comments.html. Я Ajax-ом вывожу список комментариев comments + форму для отправки нового comment со страницы comment.html на страницу descriptions.html. Ну так вот - в наборе информации, которую Ajax отображает есть тег формы, которая нужна для отправки на сервер нового comment:
…
<form id='commentform' action="{% url 'comments:comment_create' description.id %}" method='post' class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button name="submit" class="btn btn-primary">SEND</button>
{% endbuttons %}
</form>

...

Далее, после того, как Ajax взял информацию (включая тег формы) со страницы comments.html и отобразил ее на странице descriptions.html, я, оставаясь на странице descriptions.html хочу поставить обработчик событий на отправку формы на сервер c помощью jQuery:
$(function(){
$('#commentform').on('submit', function(e){
e.preventDefault();
url = $(this).attr('action');
var comment = $('#commentform').serialize();
$.ajax({
url: url,
type: 'POST',
data: comment,
success: function(data){
$('#new_comment').html(data)
},
fail: function(){
$('#new_comment').html('everything is very bad')
}
});
});
});


На сервере Django анализирует входящий запрос с помощью AjaxableResponseMixin и уверенно заявляет, что поступил НЕ Ajax запрос. То есть jQuery почему-то не видит тег, $('#commentform'), который загрузил Ajax с другой страницы. Хотя если в браузере открыть HTML код страницы, то я вижу этот тег. Он отображается на странице, но jQuery в упор его не видит и шлет обычный запрос. Почему? И как быть? Пробовал поставить делегирование событий на document
$(function(){
$(document).on('submit', function(e){
e.preventDefault();
url = e.target.attr('action');
var comment = e.target.serialize();
$.ajax({
url: url,
type: 'POST',
data: comment,
success: function(data){
$('#new_comment').html(data)
},
fail: function(){
$('#new_comment').html('everything is very bad')
}
});
});
});


Но из всего этого сработало только e.preventDefault(), больше ничего не происходит, запрос не отправляется и не обрабатывается. Помогите нубу, куда дальше двигаться (ну кроме как нафиг, с тупыми вопросами)?
  • Вопрос задан
  • 1943 просмотра
Решения вопроса 1
@ortsuev33
Ищите делегирование событий
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rim89
@rim89
программист-велосипедист
если вы что то добавили до DOM изменился поэтому надо так:
$(document).find('#commentform')
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы