Функция jQuery, не привязанная к новым добавленным элементам dom

Здесь index.html:

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>

Если я нажимаю на ссылку test1, она показывает alert('test'), но если я нажму на ссылку add, нажмите test, она ничего не отобразит.

Не могли бы вы объяснить это?

Ответ 1

Для пользователей, пришедших на этот вопрос после 2011 года, существует новый правильный способ:

$(document).on('click', '.btn_test', function() { alert('test'); });

Это относится к jQuery 1.7.

Для получения дополнительной информации см. Прямые и делегированные события

Ответ 2

Вам нужно использовать "живой" клик, потому что изначально будет существовать только один элемент.

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

Обновление. Поскольку live устарел, вы должны использовать "on()":

$(".btn_test").on("click", function(){ 
   alert("test");
});

http://api.jquery.com/on/

Ответ 3

У меня такая же проблема, как и вопрос, который я только что притягивал к себе, а потом получил решение. Я использовал другой синтаксис

$(".innerImage").on("click", function(){ 
alert("test");
});

он не работал у меня (innerImage динамически создается dom) Теперь я использую

$(document).on('click', '.innerImage', function() { alert('test'); });

http://jsfiddle.net/SDJEp/2/

спасибо @Moshe Katz

Ответ 4

.click привязывается к тому, что в настоящее время видимо для jQuery. Вам нужно использовать .live:

$('.btn_test').live('click', function() { alert('test'); });

Ответ 5

Вместо этого используйте JQuery live. Вот справочная страница для него http://api.jquery.com/live/

$('.btn_test').live(function() { alert('test'); });

Изменить: live() устарел, и вместо этого вы должны использовать on().

$(".btn_test").on("click", function(){ 
   alert("test");
});

Ответ 6

Это потому, что вы нажимаете событие, привязано только к существующему элементу во время привязки. Вам нужно использовать live или делегат, который привяжет событие к существующим и будущим элементам на странице.

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

Jquery Live

Ответ 7

вам нужно живой прослушиватель вместо щелчка:

$('.btn_test').live('click', function() { 
   alert('test'); 
});

Причиной является то, что click присваивает слушателю только элементы при загрузке страницы. Любые добавленные новые элементы не будут иметь этого слушателя. Live добавляет прослушиватель кликов к элементу, когда страница загружается и когда они добавляются впоследствии

Ответ 8

При загрузке документа вы добавляете прослушиватели событий к каждому соответствующему классу для прослушивания события клика по этим элементам. Тот же прослушиватель автоматически не добавляется к элементам, которые вы добавляете в Dom позже.

Ответ 9

Поскольку событие привязано к каждому соответствующему элементу в документе, готово. Любые добавленные новые элементы автоматически не привязаны к ним тем же самым событиям.

Вам придется вручную привязать событие к любому новому элементу после его добавления или использовать живой прослушиватель.

Ответ 10

$('.btn_test').click

добавит обработчик для элементов, доступных на странице (на данный момент "тест" не существует!)

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

$('.btn_test').live(function() { alert('test'); });

Ответ 11

После использования jquery 1.7 на методе, и он действительно работает хорошо

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
<script>
    $(document).ready(function(){
      $("p").on("click",function(){
       alert("The paragraph was clicked.");
       $("body").append("<p id='new'>Now click on this paragraph</p>");
    });
    $(document).on("click","#new",function(){
       alert("On really works.");
      });
    });
</script>
</head>
<body>
    <p>Click this paragraph.</p>
</body>
</html>

видеть в действии http://jsfiddle.net/rahulchaturvedie/CzR6n/

Ответ 12

Или просто запустите script в конце вашей страницы

Ответ 13

Вам нужно добавить правильную функцию нажатия кнопки, чтобы дать правильный результат

$("#btn1").live(function() { alert("test"); });