jquery点击事件没有解雇？

Question

我有这个页面,如果你将地图向下滚动到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中弃用并删除(有充分理由).有关用法和解决方案,请参阅下面的事件委派策略.

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