jQuery — кнопка из ajax

#jquery #ajax

#jquery #ajax

Вопрос:

Я из России, так что извините за плохой английский. Я загружаю часть веб-страницы с помощью 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>
  

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

Ответ №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');
});
  

Ответ №2:

Измените ее, чтобы использовать:

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

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

Ответ №3:

эта часть:

 $("#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 /

Ответ №4:

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

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