Reputation: 1

jquery - How to stop click event from bubbling?

I just started learning jquery, but im stuck here ate this part, cuz somehow my click event is fired multiple times. Maybe this is a stupid question , but this is driving me crazy cuz i've searched for hours to fix this problem and found nothing.

<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>

There is a php script after the Jquery code that return all the movies like this :

<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>

I even tried the event.stopPropagation() method but didn't fix it :/

Upvotes: 0

Answers (3)

Axel

Reputation: 10772

The problem is you are binding a new click event with each "mouseenter", which causes the events to multiply. So if you mouseenter several times, and click your element, the event will fire multiple times (as many times as your mouse entered the element.

What you can do instead is loop through the elements using the .each() function, then binding the click event to each one individually. You don't need to trigger a mousenter event to bind a click event.

Then to reference the movie_id data, you can search back for the parent container using the .parents() function, then grab the data off the matched parent element.

Try this:

$(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;
        });
    });
});

You will also note that I am using data('movie_id') which is a more proper way of retrieving custom data from an element. You should be setting the data on the tag using data-movie_id='{$each_movie['id']}' like so:

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

From there, you can retrieve the value using $(this).data('movie_id');

Read more about the .data() tag here: http://api.jquery.com/data/

View a working example here: http://jsfiddle.net/tNpmP/

Additionally, I believe you have a typo. You have .newsfeed_it in your HTML, but you're calling .newsfeed_id in your javascript.

Upvotes: 1

fejese

Reputation: 4628

You should not attach the click event handler in the mouseenter because this way every time you move your mouse over it you re-add the even handler. Whenever you click the click even handler will be executed as many times as you've triggered the mouseenter event. Try this instead:

$(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;
        });
    });
});

Demo: http://jsfiddle.net/mD8fp/

Upvotes: 2