jQuery 点击事件没有触发？

Question

我有这个PAGE如果你将 map 向下滚动到 li，我就会看到这里是我的代码

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>

我的 jQuery

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

如果我点击链接，什么也不会发生......你可以查看源代码并在那里看到它......但是如果我将它粘贴到控制台中，它工作正常......什么给出了

Answer 1

此标记是否异步添加到 DOM 中？在这种情况下，您需要使用 live:

注意: .live 已在最新版本的 jQuery 中被弃用并删除(有充分的理由)。使用方法及解决方法请引用下面的事件委托(delegate)策略。

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

您能够重新运行脚本 block 并使其工作的事实告诉我，由于某种原因，元素在绑定(bind)时不可用，或者绑定(bind)在某个时刻被删除。如果元素在绑定(bind)时不存在，您将需要使用live(或者最好是事件委托(delegate))。否则，您需要检查代码中是否有其他会删除绑定(bind)的内容。

使用 jQuery 1.7 事件委托(delegate):

$(function () {

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

});

如果您想在文档准备好之前绑定(bind)事件，您也可以将事件委托(delegate)给文档(请注意，这也会导致 jQuery 检查每个单击事件以确定该元素是否与适当的选择器匹配) :

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