Помогите правильно подключить jquery ajax
Добрый день.
Есть страница - опросник, где пользователь читает вопрос, нажимает "да" или "нет", после чего его ответ передается аяксом на сервер. С сервера возвращается новый вопрос И НОВЫЕ КНОПКИ "ДА" И "НЕТ", к которым скрипт уже не может подключится. Как сделать, что бы скрипт подключался к новоприбывшим кнопкам (подключение идет по классу кнопки)? КОД КНОПКИ: <button type="submit" name="user_answer" value="0" class="answer_button">Нет</button> КОД JS, подключается в футере страницы опросника:
$(document).ready(function(){
$(".answer_button").click(function(){
var msg = $(this).val();
$.ajax({
type: 'POST',
url: 'index.php',
data: 'user_answer=' + msg + '&ajax=on',
success: function(data) {
$('.content').html(data);
},
error: function(xhr, str){
alert('Error ' + xhr.responseCode);
}
});
});
});
Кнопки должны приходить с сервера, оставить их на странице не могу. Спасибо. |
Кнопки сами по себе или же форма?
|
Кнопки в форме:
<form method="POST" action="javascript:void(null);" class="ans_buttons"> <button type="submit" name="user_answer" value="1" class="answer_button">Да</button> <button type="submit" name="user_answer" value="0" class="answer_button">Нет</button> </form> |
Цитата:
|
В свою очередь форма является потомком блочного элемента
<div class="content"></div> Который является частью статичного содержимого страницы. |
alexgerber,
Попробуйте вместо :
09 $('.content').html(data);
Это:
$(data).find('form.ans_buttons').appendTo('.content:last');
|
РЕШЕНО использованием jquery функции on()
$(".content").on('click','.answer_button' , function(){
var msg = $(this).val();
$.ajax({
url: 'index.php',
data: 'user_answer=' + msg + '&aj=on',
success: function(data) {
$('.content').html(data);
},
error: function(xhr, str){
alert('Error ' + xhr.responseCode);
}
});
});
Пояснение кода: для работы с динамически подгружаемым контентом, указывается статический родитель подгружаемого контента (в моем случае это ".content"), в функции on() вторым аргументом передается нужный элемент. |
Цитата:
<form method="POST" class="ans_buttons">
$(".content").on('submit','form.ans_buttons' , function(e){
e.preventDefault()
$.ajax({
url: 'index.php',
data: $(this).serialize() + '&aj=on',
success: function(data) {
$('.content').html(data);
},
error: function(xhr, str){
alert('Error ' + xhr.responseCode);
}
});
});
|
Спасибо!
|
| Часовой пояс GMT +3, время: 20:39. |