javascript - Selecting an element with jQuery in a Twitter Bootstrap Popover - Stack Overflow

admin管理员组

文章数量:1277910

I'm placing the following content in a Twitter Bootstrap popover, which contains a link for which I want to listen for clicks:

<div id="popover-content">
  <a id="link" href="#">click</a>
</div>

I'm using a button to reveal the popover which contains the above content:

<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>

I then associate the button with the popover and use jQuery's click() function in attempt to listen for clicks on the link contained in the popover:

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});

However, upon clicking the button to reveal the popover and then clicking the link, the click seems to not be detected as intended above. My understanding of the DOM and javascript and jQuery is fairly limited, so I'm not sure what's going on here. How can you select/listen for actions on elements contained in a popover?

Reference: Popovers in Bootstrap

I'm placing the following content in a Twitter Bootstrap popover, which contains a link for which I want to listen for clicks:

<div id="popover-content">
  <a id="link" href="#">click</a>
</div>

I'm using a button to reveal the popover which contains the above content:

<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>

I then associate the button with the popover and use jQuery's click() function in attempt to listen for clicks on the link contained in the popover:

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});

However, upon clicking the button to reveal the popover and then clicking the link, the click seems to not be detected as intended above. My understanding of the DOM and javascript and jQuery is fairly limited, so I'm not sure what's going on here. How can you select/listen for actions on elements contained in a popover?

Reference: Popovers in Bootstrap

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked May 11, 2013 at 6:54 TPoyTPoy 96211 gold badge1111 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You do not need to perform Event delegation here.Instead use $('#popover-content') instead of $('#popover-content').html() while setting the content. This will have the events registered attached by default without requiring any delegation.

Demo

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content'); //<-- Remove .html()
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});

You can try this:

$(document).on('click', '#link', function(){
    alert('beep');
});

You can mannuly use popover:

html

<div id="popover-wrapper">
  <button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
  <div class="popover right popup-area popover-pos">
    <div class="popover-content">
      <div id="popover-content">
        <a id="link" href="#">click</a>
      </div>
    </div>
  </div>
</div>

css

#popover-wrapper {
  .popover {
    left: auto;
    right: 0;
    width: 250px;
    top: 35px;

    .popover-content {
      // ..
    }
  }

  &.open .popover {
    display: block;
  }
}

js

  $('#trigger').hover(function() {
    $(this).stop(true, true).delay(250).queue(function(next){
      $(this).addClass('open');
      next();
    });
  }, function() {
      $(this).stop(true, true).delay(250).queue(function(next){
        $(this).removeClass('open');
        next();
      });
    }
  );

本文标签： javascriptSelecting an element with jQuery in a Twitter Bootstrap PopoverStack Overflow