Twitter Bootstrap Question posted in

Twitter bootstrap – Child elements preventing trigger event on parent

I have a parent <span> element with nested <em> elements. The <span> is given a width and display:block via CSS.

The <span> has a jQuery trigger event on it which is fired correctly but if you rollover one of the child items then the mouse out event is fired and my Twitter Bootstrap popover disappears.

Is there a way to “hide” the child elements to prevent this from happening?

/*** UPDATE WITH CODE SAMPLE **/
Th stopPropagation() is not working.

$("#div").on('mouseover', '.badge', function () {


                //prevent child items from closing our popover
                $(this).on('mouseenter', 'em', function (e) {
                    e.stopPropagation();
                })

                $(this).popover({
                    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                    title: 'Title',
                    content:"Some content",
                    html: true,
                    placement: 'auto',
                    trigger:'manual'
                });

                $(this).popover('show');

        });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I came up with a workaround, where I placed a transparent background span element over the top of the "badge" and placed the popover event on that.


  2. 0

    As per the updated code, you don’t need event.stopPropagation() to suppress events on child elements. You can make use of e.target to locate the element from where the event was triggered and make use of it to determine what should be the course of action.

    $("#div").on('mouseover','.badge',function (e) {        
         if($(e.target).attr("class") == undefined) {  // since em doesn't have class attribute , this would return 'undefined'
              return true;
          }

           $(this).popover({
                template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                title: 'Title',
                content:"Some content",
                html: true,
                placement: 'auto',
                trigger:'manual'
            });

            $(this).popover('show');            
    });

    Working example : http://jsfiddle.net/ao1L2Lce/2/

    (P.S – I have replaced mouseover event with click in the fiddle for validating the functionality easily )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search