Функція jQuery не прив'язує до нещодавно доданих елементів dom

75

Ось 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, воно нічого не показує.

Не могли б ви пояснити це?

javascript jquery onclick

— Ральськ28
джерело

4

і 10000 людей просто написали ту саму відповідь

— Амір Рамінфар

9

Відображуване ім'я @Bad: Тоді виправте це і не будьте придурком.

— скрапкола

213

Для користувачів, які прийшли до цього питання після 2011 року, є новий правильний спосіб зробити це:

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

Це станом на jQuery 1.7.

Для отримання додаткової інформації див. Прямі та делеговані події

— Моше Кац
джерело

2

Бажаю, щоб я міг вибрати відповідь як "Прийняту відповідь". Дякуємо, що врятували мій (залишився) день!

— sohaiby

1

Я просто продовжував розв'язувати () та перев'язувати методи у всьому своєму проекті, перш ніж побачив це. Де хлопець, який це запитав? Чоловіче, прийми це.

— Нереалістичний

Захоплююче і круто! Дякуємо за додавання цього роз'яснення. Виправлено неприємну проблему для мене.

— tonejac

Слід додати, що правильний спосіб вирішити це - додати параметр "селектор". Я зрозумів це, прочитавши посилання, але не завдяки вашій відповіді. Все-таки я вдячний :) @Moshe Katz

— villancikos

$ (document) - це нормально, але для кращої роботи було б краще використовувати $ ("# element") або $ (". class") - там, де елемент або клас вже існує в dom. Замість того, щоб jquery переглядав весь документ, він буде спостерігати лише за #element або .class.

— Ерік Кігаті,

34

Вам потрібно використовувати "живий" прослуховувач клацань, оскільки спочатку буде існувати лише один елемент.

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

Оновлення: Оскільки live застаріла, слід використовувати "on ()":

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

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

— Дуг Моліне
джерело

3

Так, для уточнення - liveце динамічний обробник із запізненням, який може приєднуватися до елементів, доданих до DOM після оголошення обробника. Докладнішу інформацію див. У цій документації .

— chrisf

2

Інший спосіб зазначити це: .click()застосовуватиметься лише до об’єктів, які існують під час завантаження сторінки, але .live()застосовуватиметься до всіх об’єктів, які існують зараз або створені в майбутньому.

— Джордж Каммінс,

я отримав нове запитання, як я можу використовувати метод live з цим -> steamdev.com/zclip

— Ralsk28

1

@ Ralsk28: Якщо ця відповідь вам допомогла, ви можете нагородити Піта, проголосувавши відповідь і натиснувши прапорець, щоб прийняти її. Це також допоможе майбутнім відвідувачам сайту знайти рішення власних проблем.

— Джордж Каммінс,

1

live () зараз застарів, чи не так? яка альтернатива?

— Chris Job

15

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

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

це не працювало для мене (innerImage динамічно створюється dom) Зараз я використовую

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

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

дякую @Moshe Katz

— Умер Фарук
джерело

8

.click прив'язується до того, що зараз видно для jQuery. Вам потрібно використовувати .live:

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

— CassOnMars
джерело

Я думаю, що це найкраща відповідь на цю проблему.

7

Замість цього використовуйте Jquery live . Ось довідкова сторінка для нього http://api.jquery.com/live/

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

Редагувати: live()застаріло, і on()замість нього слід використовувати .

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

— Амір Рамінфар
джерело

.live () застаріло, використовуйте .on ().

— freeworlder

6

@silkfield Я оновив свою відповідь. Але наступного разу, будь ласка, запропонуйте редагувати замість того, щоб голосувати проти. SO - це форум для питань та відповідей спільноти, де ми всі можемо вдосконалитись.

— Амір Рамінфар

3

Це пов’язано з тим, що натискання події прив’язується лише до існуючого елемента на момент прив’язки. Вам потрібно використовувати live або делегат, який прив’яже подію до існуючих та майбутніх елементів на сторінці.

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

Jquery Live

— металобрухт
джерело

2

вам потрібен живий слухач замість клацання:

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

Причиною є те, що clickєдиний призначає прослуховувач елементам під час завантаження сторінки. Будь-які нові додані елементи не матимуть цього прослуховувача. Live додає прослуховувач кліків до елемента, коли сторінка завантажується і коли вони додаються згодом

— локризак
джерело

1

Коли документ завантажується, ви додаєте слухачі подій до кожного відповідного класу для прослуховування події клацання на цих елементах. Той самий слухач не додається автоматично до елементів, які ви додаєте до Dom пізніше.

— shanethehat
джерело

1

Оскільки подія пов’язана з кожним відповідним елементом у документі, готовим. Будь-які нові додані елементи НЕ мають автоматично пов’язаних з ними однакових подій.

Вам доведеться вручну прив’язати подію до будь-якого нового елемента, після того як він буде доданий, або використовувати живий прослуховувач.

— Ніл Н.
джерело

1

$('.btn_test').click

додасть обробник для елементів, які доступні на сторінці (на даний момент "тест" не існує!)

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

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

— Каролі Горват
джерело

1

Після 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/

— Рахул
джерело

0

Або просто запустіть сценарій в кінці сторінки

— Енігмакс
джерело

0

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

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

— Салман Ашраф
джерело