Селектор класса jQuery не работает

Я изо всех сил пытаюсь сделать предупреждение, когда на ядре привязки с определенным классом щелкнут внутри div.

Мой раздел html выглядит так...

<div id="foo">
  <a class='bar' href='#'>Next</a>
</div>

Раздел jQuery выглядит следующим образом.

$('.bar').click(function()
{
  alert("CLICKED");
});

Моя проблема в том, что я не могу получить это предупреждение, я думаю, что я правильно выбираю класс "следующий", но по какой-то причине он не подберет его. Я также пробовал почти все на этой странице, но ничего не работает. Если я не пытаюсь указать тег привязки, то есть $('# foo'). Click (function()... тогда он работает, но в этом div будет несколько тегов привязки, поэтому просто выполняется предупреждение нажатие на div не будет работать для того, что мне нужно. Веб-сайт, на котором он находится, является поисковой системой, использующей ajax для отправки информации в do_search.php. В do_search.php я принимаю решения о разбиении на страницы, основываясь на том, сколько результатов найдено, и если применимо, может быть сделана и повторена следующая, предыдущая, последняя и первая ссылка.

EDIT: Я только что понял, это было мое размещение функции .next, поскольку оно не было создано при загрузке исходного документа, но вместо того, чтобы результат был возвращен, я перенесла функцию .next в успех часть функции ajax, так как именно там будут созданы кнопки, если они должны быть, теперь это работает.

Ответ 1

Попробуйте использовать команду live():

$(".bar").live("click", function(){ alert(); });

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

Подробнее, здесь

Ответ 2

Вы наверняка пропустили $(document).ready(). Ваш код должен быть:

  $(document).ready(function(){
      $('.bar').click(function()
      {
        alert("CLICKED");
      });
    });

Надеюсь, это поможет. Приветствия

Ответ 3

.live теперь устарел и является выбранным для этого ответом. Ответ указан в комментариях в выбранном ответе выше. Вот решение, которое разрешило это для меня:

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

Благодаря @Blazemonger для исправления.

Ответ 4

Убедитесь, что вы правильно включили JQuery Library.
Убедитесь, что ваш script написан между $(document).ready() in short $(function(){ });

Демо: http://jsfiddle.net/W9PXG/1/

<div id="foo">
  <a class='bar' href='#'>Next</a>
</div>

$(function(){
$('a.bar').click(function()
  {
    alert("CLICKED");
});
});