jQuery的点击事件不触发? [英] jquery click event not firing?

问题描述

我有这个 PAGE ，如果您将地图向下滚动到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>

如果我单击链接，则什么也没有发生....您可以查看源代码并在那里查看它...但是，如果我将其粘贴到控制台中，它就可以正常工作...给出了什么

解决方案

此标记是否异步添加到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();
});

I have this PAGE and I have if you scroll down the map to the li here is my code

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>

Nothing is happening at all if i click on the links....you can view source and see its there...but if i paste it in console it works fine...what gives

解决方案

Is this markup added to the DOM asynchronously? You will need to use live in that case:

NOTE: .live has been deprecated and removed in the latest versions of jQuery (for good reason). Please refer to the event delegation strategy below for usage and solution.

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

The fact that you are able to re-run your script block and have it work tells me that for some reason the elements weren't available at the time of binding or the binding was removed at some point. If the elements weren't there at bind-time, you will need to use live (or event delegation, preferably). Otherwise, you need to check your code for something else that would be removing the binding.

Using jQuery 1.7 event delegation:

$(function () {

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

});

You can also delegate events up to the document if you feel that you would like to bind the event before the document is ready (note that this also causes jQuery to examine every click event to determine if the element matches the appropriate selector):

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

这篇关于jQuery的点击事件不触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！