Question

16

jQuery trigger click gives too much recursion

rated 0 times [ 17] [ 1] / answers: 1 / hits: 17128 / 13 Years ago, wed, may 11, 2011, 12:00:00

I'm tryin' to make the article's link clickable on the whole article space.

First, I did the hover thing, changing color on mouseover and so on... then on click it should trigger the link, but this gives a too much recursion.

I think it's a event bubbling problem. I tried to work with event.cancelBubble = true; or stopPropagation() with no luck. Worse luck!

anyone?

    $(div.boxContent).each(function() {

        if ($(this).find(.btn).length) {



            var $fade = $(this).find(div.btn a > span.hover);

            var $title = $(this).find(h1, h2, h3, h4, h5);

            var $span = $(this).find(span).not(span.hover);

            var $text = $(this).find(p);



            var titleColor = $title.css('color');

            var spanColor = $span.css('color');



            $(this).css({'cursor':'pointer'}).bind({

                mouseenter:function() {

                    $text.stop().animate({color:linkHover},textAnim);

                    $title.stop().animate({color:linkHover},textAnim);

                    $span.stop().animate({color:linkHover},textAnim);

                    $fade.stop(true,true).fadeIn(textAnim);

                }, mouseleave:function() {

                    $text.stop().animate({color:linkColor},textAnim);

                    $title.stop().animate({color:titleColor},textAnim);

                    $span.stop().animate({color:spanColor},textAnim);

                    $fade.stop(true,true).fadeOut(textAnim);

                }, focusin:function() {

                    $text.stop().animate({color:linkHover},textAnim);

                    $title.stop().animate({color:linkHover},textAnim);

                    $span.stop().animate({color:linkHover},textAnim);

                    $fade.stop(true,true).fadeIn(textAnim);

                }, focusout:function() {

                    $text.stop().animate({color:linkColor},textAnim);

                    $title.stop().animate({color:titleColor},textAnim);

                    $span.stop().animate({color:spanColor},textAnim);

                    $fade.stop(true,true).fadeOut(textAnim);

                }

            }).click(function() {

                $(this).find(div.btn a).trigger('click');

            });

        }

    });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

albert

Add To Favorites

Follow

Total Points: 652

Total Questions: 105

Total Answers: 108

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

albert questions

1 MUI v5 - Extending Typography variant in TypeScript creates error No overload matches this call

Wed, Nov 17, 21, 00:00, 3 Years ago

1 Update one, insert if not exists and modify only when a condition is true MongoDB

Thu, Mar 19, 20, 00:00, 4 Years ago

1 React - input loses focus on keypress

Sat, Nov 9, 19, 00:00, 5 Years ago

1 Multiple select fields filtering with jQuery

Thu, Oct 24, 19, 00:00, 5 Years ago

1 How to update redux state using a react variable passed up to the component from a child

Wed, Sep 25, 19, 00:00, 5 Years ago

View All

answered 13 Years ago arielle · Accepted Answer

The problematic bit of your code is this:

$(div.boxContent) /* miss the each function */

.click(function() {

    $(this).find(div.btn a).trigger('click');

});

This says every time any click event is received on this element, trigger a click on the descendant element. However, event bubbling means that the event triggered in this function is then handled again by this event handler, ad infinitum. The best way to stop this is, I think, to see if the event originated on the div.btn a element. You could use is and event.target for this:

$(div.boxContent) /* miss the each function */

.click(function(event) {

    if (!$(event.target).is('div.btn a')) {

        $(this).find(div.btn a).trigger('click');

    }

});

This says if the click originated on any element apart from a div.btn a, trigger a click event on div.btn a. This means that events caused by the trigger call will not be handled by this function. This is superior to checking event.target == this (as Andy's answer has it) because it can cope with other elements existing within the div.boxContent.