Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите правильно подключить jquery ajax (https://javascript.ru/forum/misc/61816-pomogite-pravilno-podklyuchit-jquery-ajax.html)

alexgerber 10.03.2016 11:47

Помогите правильно подключить 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);
            }
        });
    });
});


Кнопки должны приходить с сервера, оставить их на странице не могу. Спасибо.

laimas 10.03.2016 12:09

Кнопки сами по себе или же форма?

alexgerber 10.03.2016 12:23

Кнопки в форме:

<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>

alexgerber 10.03.2016 12:25

Цитата:

Сообщение от alexgerber (Сообщение 410501)
Кнопки в форме:

<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>

Форма тоже приходит с сервера (с кнопками).

alexgerber 10.03.2016 12:33

В свою очередь форма является потомком блочного элемента
<div class="content"></div>

Который является частью статичного содержимого страницы.

Deff 10.03.2016 12:49

alexgerber,
Попробуйте вместо :
09        $('.content').html(data);

Это:
$(data).find('form.ans_buttons').appendTo('.content:last');

alexgerber 10.03.2016 12:53

РЕШЕНО использованием 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() вторым аргументом передается нужный элемент.

laimas 10.03.2016 13:09

Цитата:

Сообщение от alexgerber
Пояснение кода: для работы с динамически подгружаемым контентом, указывается статический родитель подгружаемого контента

Это называется делегирование, и уж коли форма, то лучше

<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);
        }
    });
});

alexgerber 10.03.2016 13:25

Спасибо!


Часовой пояс GMT +3, время: 06:44.