我刚刚开始学习jquery,但是我被困在这里吃了这一部分,因为我的click事件多次被触发。 也许这是一个愚蠢的问题,但这使我发疯,因为我已经搜寻了数小时来解决此问题,却一无所获。

<script type='text/javascript'>
    $(document).ready(function(){
        var movie_id;
        var m_hover_time;
        var loader = "<img class='loader' src='images/loader.gif' />";
        $("#mhb .each_movie").mouseenter(function(){
            movie_id = $(this).attr("movie_id");
            m_hover_time = setTimeout(function(){
                $("[movie_id='"+movie_id+"'] .each_movie_box").append(loader).slideDown();
                $.post("ajax/movie_load.php",{load_type:2, movie_id:movie_id}, function(movie_info){
                    $("[movie_id='"+movie_id+"'] .each_movie_box").html(movie_info);
                });
            }, 1500);
 $("[movie_id='"+movie_id+"'] .newsfeed_it").click(function(){
            alert(movie_id);
            return false;
        });
        }).mouseleave(function(){
            clearInterval(m_hover_time);
            $("[movie_id='"+movie_id+"'] .each_movie_box").html(" ").slideUp();
        });
    });
</script>

jQuery代码后有一个php脚本,可返回所有类似这样的电影:

<div class='each_movie' movie_id='{$each_movie['id']}'> <!-- Each movie start here -->
                <div class='each_movie_box'>
                    <!-- each_box -->
                </div>
                <div class='each_movie_thumb' style='background-image:url({$each_movie['thumb']});'>
                    <div class='each_movie_hover'>
                        <div class='emh_top'><img src='images/movie_info.png' class='newsfeed_it' /></div>
                        <a href='filma.php?filmi={$each_movie['id']}'><div class='emh_play'></div></a>
                        <div class='emh_bottom'>
                            <img src='images/movie_fav.png' />
                            <img src='images/movie_later.png' />
                        </div>
                    </div>
                </div>
                <div class='each_movie_info'>
                    <a href='filma.php?filmi={$each_movie['id']}'>
                        <span class='name'>{$each_movie['title']}</span>
                    </a>
                    <span class='categories'>{$movie_categories}</span>
                    <span class='views'>{$each_movie['views']} Shikime</span>
                </div>
            </div>

我什至尝试过event.stopPropagation()方法,但没有解决它:/

===============>>#1 票数:2

您不应将click事件处理程序附加在mouseenter因为这样,每次将鼠标移到它上面时,您都会重新添加偶数处理程序。 每当您单击时, click均匀事件处理程序将与触发mouseenter事件一样执行多次。 尝试以下方法:

$(document).ready(function(event){
    $("#mhb .each_movie").each(function(){
        var movie_id = $(this).attr("movie_id");
        $("[movie_id='"+movie_id+"'] .newsfeed_it").click(function(){
            alert(movie_id);
            return false;
        });
    });
});

演示: http//jsfiddle.net/mD8fp/

===============>>#2 票数:1

问题是您将每个新的click事件与每个“ mouseenter”绑定在一起,这会使事件成倍增加。 因此,如果您多次单击鼠标并单击您的元素,则该事件将触发多次(与您的鼠标进入元素的次数相同)。

您可以做的是使用.each()函数遍历元素,然后将click事件分别绑定到每个事件。 您无需触发mousenter事件即可绑定click事件。

然后,要引用movie_id数据,可以使用.parents()函数向后搜索父容器,然后从匹配的父元素中获取数据。

尝试这个:

$(document).ready(function(event){
    $("#mhb .each_movie").each(function() {
        var $img = $(this).find('.newsfeed_id');

        //Bind a click event to the image element.
        $img.click(function() {
            var $this = $(this);
            $parent = $this.parents('.each_movie');  //Search for parents with class .each_movie
            movie_id = $parent.data('movie_id'); //Get the movie_id from the parent.

            alert(movie_id);
            return false;
        });
    });
});

您还将注意到,我使用的是data('movie_id') ,这是从元素中检索自定义数据的更合适的方法。 您应该使用data-movie_id='{$each_movie['id']}'在标签上设置数据,如下所示:

<div class='each_movie' data-movie_id='{$each_movie['id']}'>

从那里,您可以使用$(this).data('movie_id');检索值$(this).data('movie_id');

在这里阅读有关.data()标记的更多信息: http : //api.jquery.com/data/

在此处查看工作示例: http : //jsfiddle.net/tNpmP/

另外,我相信您有错字。 您的HTML中有.newsfeed_it ,但是您在javascript中正在调用.newsfeed_id

===============>>#3 票数:0

尝试向函数添加布尔值,因此在函数集之外:

var entered = false;

在功能集内:

entered = true;

然后添加一个mouseleave函数

entered = false;

这应该可以解决您的问题

  ask by Dorjan Vulaj translate from so

未解决问题?本站智能推荐:

2回复

jQuery-在所有浏览器中停止事件冒泡

我有一些大量嵌套的GUI控件-单击或更改它们时,或者我需要采取什么措施来阻止该事件继续深入DOM树时。 它需要在所有浏览器上都能工作。 在这一点上,我有一些笨拙的JS代码: 这确实有效,但是它闻起来并感觉不对(我个人讨厌空的捕获块)。 我可以使用更整洁的x浏览器技巧吗?
3回复

在Jquery中使用.on停止事件冒泡

我已经将以下内容剥离回裸骨,我传递更多属性来调用我的ajax中的specfic信息。 上面是我正在使用的Jquery的示例,下面是我正在使用的html。 单击此处加载单击时,showform.asp页面内容将加载到LoadArea div中。 showform.asp的内容如下
3回复

如何停止jQuery中的事件冒泡?

我在check box上使用了一些JQ东西,即使单击了父div 。 我切换check box的值。 单击div可以正常工作,但是当您单击复选框时,该函数将被调用两次。 有什么办法解决这个问题? 以下是我的代码( Fiddle )HTML: JQ: 我已经在stackove
6回复

jQuery单击事件冒泡

我遇到的问题似乎与事件冒泡有关。 当用户单击列表项时,我将该元素的innerHTML存储到变量中,并将列表项内容替换为具有新变量值的文本框。 第一次单击时效果很好,但是当用户单击文本框时,也会插入文本框的html。 这是我的问题的小提琴: http : //jsfiddle.n
2回复

jQuery-单击事件未触发

您好,我尝试使我的表格行能够点击。 我的问题是,当我单击该行时,什么也没有发生。 当我将鼠标放在行上时,光标确实发生了变化。 我的代码: 表创建代码: Javascript: PHP代码: CSS:
3回复

jQuery-否则单击事件

我对jQuery很陌生,现在就玩。 我正在尝试创建一个单击事件,只要单击该事件,它的<select></select>属性必须为'disabled',才能为true / false。 因此,它从disabled [true]开始,当单击链接时将变为disabled
5回复

使用JQuery-单击事件

所以...我做了一个页面,您可以在其中找到一些产品,每个产品都有价格/说明/标题。 我目前正在尝试更改价格,但问题是,如果您单击按钮(与销售相关),我希望它们进行更改。 我想更改价格并添加20%的折扣。 我开始做一些事情,仅将价格的颜色从黑色更改为红色: 我通过CSS选择了我的
1回复

单击事件后事件冒泡jQuery .delegate()或.live()

我尝试了许多不同的可能性来实现我认为应该是简单的代码执行的感觉。 我正在通过.load()从服务器加载DOM对象。 加载的项目之一是其中带有日期的输入文本框。 当我单击输入框时,我想加载jdpicker(插件datepicker)。 由于.live()和.delegate()的行为,即使
1回复

为什么stopPropagation不会停止单击事件的冒泡? [重复]

这个问题已经在这里有了答案: jQuery中的e.stopPropagation()是否对锚标记起作用 5个答案 我在锚标签中有一个span标签。 当单击span时,我希望链接不会被跟随,也就是说,我想停止单击span来触发(冒泡)单击anchor标签。 为此,
8回复

如何在复选框单击时停止事件冒泡

我有一个复选框,我想对click事件执行一些Ajax操作,但是复选框也在一个容器内,它有自己的点击行为,当我点击复选框时我不想运行它。 此示例说明了我想要做的事情: $(document).ready(function() { $('#container').addClass(