Событие jquery click не срабатывает?

У меня есть эта PAGE, и у меня есть, если вы прокрутите карту вниз по карте, вот мой код

HTML

<ul class="play_navigation">
    <li class="active"><a class="barino_story_bottom" href="#">The Story</a></li>
    <li><a class="barino_video_bottom" href="#">The Video</a></li>
    <li><a class="barino_gallery_bottom" href="#">The Gallery</a></li>
    <li><a class="barino_equipment_bottom" href="#">The Equipment</a></li>                          
</ul>

my jQuery

<script type="text/javascript">
    $(document).ready(function(){
        $('.play_navigation a').click(function(){
            console.log("this is the click");
            return false;
        });
    });
</script>

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

Ответ 1

Является ли эта разметка добавлена в DOM асинхронно? В этом случае вам нужно будет использовать live:

ПРИМЕЧАНИЕ. .live устарел и удален в последних версиях jQuery (по уважительной причине). Пожалуйста, обратитесь к стратегии делегирования событий ниже для использования и решения.

<script>
    $(document).ready(function(){
        $('.play_navigation a').live('click', function(){
            console.log("this is the click");
            return false;
        });
    });
</script>

Тот факт, что вы можете повторно запустить свой блок script и заставить его работать, говорит мне, что по какой-то причине элементы не были доступны во время привязки или привязка была удалена в какой-то момент. Если элементов не было во время привязки, вам нужно использовать live (или делегирование событий, предпочтительно). В противном случае вам нужно проверить свой код на что-то еще, что приведет к удалению привязки.

Использование делегирования событий jQuery 1.7:

$(function () {

    $('.play_navigation').on('click', 'a', function (e) {
        console.log('this is the click');
        e.preventDefault();
    });

});

Вы также можете делегировать события до документа, если вы считаете, что хотите связать событие до того, как документ будет готов (обратите внимание, что это также заставляет jQuery проверять каждое событие click, чтобы определить, соответствует ли элемент соответствующему селектору)

$(document).on('click', '.play_navigation a', function (e) {
    console.log('this is the click');
    e.preventDefault();
});

Ответ 2

Вам нужно предотвратить событие по умолчанию (по ссылке), иначе ваша ссылка загрузит новую страницу:

    $(document).ready(function(){
        $('.play_navigation a').click(function(e){
            e.preventDefault();
            console.log("this is the click");
        });
    });

Как указано в комментариях, если ваша ссылка не имеет href, то это не ссылка, используйте что-то еще.

Не работает? Ваш код - MESS! и ready() во всем мире... очистите его, поместите все ваши скрипты в ОДНО готовое событие, а затем повторите попытку, он, скорее всего, будет разбираться.

Ответ 3

Я тратил свое время на это часами. К счастью, я нашел решение. Если вы используете шаблоны администратора bootstrap (AdminLTE), эта проблема может возникнуть. Дело в том, что мы должны использовать плагины adminLTE.

пример: ifChecked событие:

$('input').on('ifChecked', function(event){
   alert(event.type + ' callback');
});

Для получения дополнительной информации нажмите здесь.

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

Ответ 4

Может быть полезным для некоторых: проверить

pointer-events: none;

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