JQuery - кнопка от ajax

Question

Я из России, извините за плохой английский. Я загружаю часть веб-страницы с помощью ajax.

например

<script type="text/javascript">
$("#link1").click(function(){
    $.post("ajax.php", { act: "load" },
    function(data) {
        $("#content").html(data);
    });
});
</script>

<a href="#" id="link1">Click</a>
<div id="content"></div>

Ajax.php возвращает: <input type="button" id="button1" value="test">

Теперь я тоже хочу управлять этой кнопкой из скрипта. Я пытаюсь:

<script type="text/javascript">
    $("#link1").click(function(){
        $.post("ajax.php", { act: "load" },
        function(data) {
            $("#content").html(data);
        });
    });

    $("#button1").click(function(){
        alert('test');
    });
</script>

но это не работает. Вы можете мне помочь? Спасибо.

Answer 1

$("#button1").click(...);

ничего не сделает, потому что элемент #button1 еще не существует при запуске этого кода ($("#button1") не выберет ни одного элемента).

Либо поместите его в обратный вызов вашего Ajax-запроса:

$.post("ajax.php", { act: "load" }, function(data) {
    $("#content").html(data);
    $("#button1").click(function(){
        alert('test');
    });
});

или используйте .delegate() / .live():

$("#content").delegate('#button1', 'click', function(){
    alert('test');
});

Answer 2

эта часть:

$("#button1").click(function(){
    alert('test');
});

присоединяет обработчик щелчка к любым существующим элементам dom с идентификатором button1 при первом запуске сценария . Поскольку эта кнопка не существует, пока вы не нажмете вручную на элемент link1, вам нужно изменить способ добавления обработчика событий. Попробуйте использовать метод live из jquery, чтобы сделать это:

<script type="text/javascript">
    $("#link1").click(function(){
        $.post("ajax.php", { act: "load" },
        function(data) {
            $("#content").html(data);
        });
    });

    $("#button1").live('click', function(){
        alert('test');
    });
</script>

Это прикрепит обработчик событий к любым соответствующим элементам, как только они станут «живыми» в документе. Подробнее здесь: http://api.jquery.com/live/

Answer 3

Измените его на использование:

$("#button1").live('click', function(){
    alert('test');
});

Функция live позволяет запускать события из элементов, которые динамически добавляются на страницу.

Answer 4

Вы регистрируете событие нажатия для любых кнопок, которые в настоящее время на странице.К тому времени, когда ваша ссылка была нажата, она уже была зарегистрирована.

Используйте прямое событие, упомянутое Ричардом Д. Это устанавливает событие для любых кнопок, которые когда-либо соответствуют идентификатору, которым вы являетесь.используя в качестве вашего селектора.