Почему этот код не привязывает событие click к тегу A?

Question

У меня есть этот HTML:

<div class="osoba listItem podrucjaDjelovanja" id="listItem1" style='display:block'> 
    <h3>..</h3> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
    <p>Areas of practice: 
    <a href="/en/aktivnosti/#listItem1A">general legal support</a>, 
    <a href="/en/aktivnosti/#listItem2A">conciliation</a>, 
    <a href="/en/aktivnosti/#listItem4A">civil and commercial contracts </a>, 
    <a href="/en/aktivnosti/#listItem8A">property management</a> 
    </p> 
</div> 

, и я пытаюсь связать событие OnClick к тегу. Я пользуюсь этим звонком:

$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a').on('click', function(event) { 

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

EDIT: Спасибо за ответы, я думаю, что будет легче, если я укажу вам на страницу, а затем скопируйте много кода. В основном, страница http://skrobotwp.gandzo.com/en/zaposlenici/, а слушатель определяется в строке ajax.js 36.

Answer 1

Ну я думаю, что проблема заключается в том, как вы вызываете функцию .on. До jQuery 1.7 у них были отдельные методы для .bind, .delegate и .live. Но с приходом jQuery 1.7 эти методы были устаревшими, чтобы упростить их, включив их под 1 метод .on. Но из-за не столь четкой документации люди не понимают метод .on. .on действительно обеспечивает функцию 3 вышеупомянутых устаревших методов, но это зависит от того, как вы используете метод .on. Вот пример:

// Bind 
$(".podrucjaDjelovanja p a").on("click", function(e) {}); 

// Live 
$(document).on("click", ".podrucjaDjelovanja p a", function(e) {}); 

// Delegate 
$(".podrucjaDjelovanja").on("click", "p a", function(e) {}); 

Я думаю, что разметка для тегов привязки, которые не работают в настоящее время объявлены после .on вызова. В этом случае вам нужно будет выполнить команду .on, как это делается для живых событий.Поэтому все, что вам нужно изменить, - это то, как вы звоните .on.

$(document).on("click", ".navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a", function(event) { 
    alert("Clicked"); 
}); 

Надеюсь, что это поможет.

Answer 2

Ошибка находится где-то вне кода, который вы указали.

Он прекрасно работает с кодом из вашего вопроса: http://jsfiddle.net/p4DRg/

$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a').on('click', function(event) { 
    event.preventDefault(); 
    alert(1); 
}); 

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

Answer 3

Является ли ваш код в JQuery ready?

Это прекрасно работает для меня:

$(function(){ 
$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a') 
    .on('click', function(event) { 
     console.log($(this)); 
     return false; 
}); 
}); 

Смотрите здесь: http://jsfiddle.net/fvDX8/

Answer 4

Run console.log($('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a'));, чтобы убедиться, что вы выбираете элементы, которые вы думаете, что вы.

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

Кроме того, вы считали, что может существовать элемент перед тем, что вы нажимаете? Например, пустая часть другого элемента накладывается. Используйте контролер DOM для проверки.

Answer 5

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

<div class="podrucjaDjelovanja osoba listItem" id="listItem1" style='display:block'> 

Answer 6

В строке 123 ajax.js заменить содержание:

$('#container').html(json.content);

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