CODEWITHSUNDEEP
javascripttwitter-bootstrappopover
Sig
Sig

Reputation: 5916

executing js from inside bootstrap popover content

Inside a bootstrap 2.3 popover I display some html code. And I need to trigger a js function when I click on it but I have an hard time to do so.

The js function is properly executed if I click on the div that contains the HTML that is rendered inside the popover but not if I click the content inside the popover itself.

Here my coffee

$('[data-toggle~=popover]').popover({ 
  html: true
  content: ->
    $("#content").html()
}) 

$(".updateit").on "click", ->
    console.log "pippo"

And the html 

<a data-placement="right" data-toggle="popover" href="#">click me</a>
<div id="content">
  <div class="updateit" style="color:red">abc</div>
</div>

For testing purpose div#content is not hidden and if I click it, "pippo" is printed out on console, however if I click on the popover content (the html looks the same) nothing is printed out on console.

Is there a way to call js function from inside the popover content?

Thanks.

Upvotes: 2

Views: 2000

Answers (1)

Bubbles
Bubbles

Reputation: 3815

This looks like a common jQuery event binding gotcha. What's probably happening is $(".updateit").on "click", () -> ... is running before the popover is created. That particular function will only bind a click event to existing elements; new ones won't have the event applied. Since the popover will create its own element with the 'updateit' class after being run, the event won't apply to it.

Fortunately, the fix is pretty easy. $(document).on 'click', '.updateit', () -> .. should do the trick. This will apply to every element of class 'updateit' within the document, regardless of when it's created.

Relevant jsbin - http://jsbin.com/ALESUXib/1/edit

Upvotes: 3

Related Questions