Функция jQuery не привязана к вновь добавленным элементам dom - PullRequest
Новая
       6

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

75 голосов
/ 30 июня 2011

Вот 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, это неничего не показывать.

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

Ответы [ 13 ]

211 голосов
/ 15 августа 2012

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

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

Это с jQuery 1.7.

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

34 голосов
/ 30 июня 2011

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

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

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

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

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

15 голосов
/ 14 февраля 2013

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

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

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

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

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

спасибо @Моше Кац

8 голосов
/ 30 июня 2011

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

$('.btn_test').live('click', function() { alert('test'); });
7 голосов
/ 30 июня 2011

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

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

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

$(".btn_test").on("click", function(){ 
   alert("test");
});
3 голосов
/ 30 июня 2011

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

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

Jquery Live

2 голосов
/ 30 июня 2011

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

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

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

1 голос
/ 11 июля 2013

После 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/

1 голос
/ 30 июня 2011 
$('.btn_test').click

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

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

$('.btn_test').live(function() { alert('test'); });
1 голос
/ 30 июня 2011

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...