bootstrap popover button click event does not working using jquery

Question

I use the code for bootstrap popover as follows,

<a href="javascript:void(0);" class="btn btn-primary btn-sm" rel="popover"  data-placement="top"
                        data-original-title="<i class='fa fa-fw fa-users'></i> Enter New Investor Group"
                        data-content="<div class='smart-form'><div class='col-sm-10'><label class='input'><input type='text' name='NewInvestor' placeholder='Investor Group Name' id='NewInvestor' /></label></div><div class='col-sm-2'><button id='btntest' class='btn btn-primary btn-sm assignedGroup' type='button' data-target-id='NewInvestor' >ADD</button></div></div><div class='clearfix'></div><br/>"
                        data-html="true">Add</a>

I would like to trigger a event on button click in jquery. Code as follows,

$("#btntest").click(function () {
        alert("You click on button");
    });

JSFiddle

What would be the reason my code is not working?

I will appreciate your help in advanced.

Your HTML is invalid. You can't put markup directly in to attributes like that - you need to encode it. — Rory McCrossan, May 12 '15 at 08:44
@RoryMcCrossan my HTML is valid. have a look at documentation for bootstrap popover http://getbootstrap.com/javascript/#popovers — sridharnetha, May 12 '15 at 09:16

Nifal Munzir · Accepted Answer · 2015-05-12T11:53:56.280

12

Assuming your code renders correctly, try the code below.

$(function(){
   $(document).on('click',"#btntest",function () {
      alert("test button clicked");
   });
});

Edited

Take a look at my JsFiddle and see if it works http://jsfiddle.net/jb5fexp3/

edited May 12 '15 at 11:53

answered May 12 '15 at 09:12

Nifal Munzir

354
1
6

Is the html being displayed on the page? Could you put it on jsFiddle so that I can check it? – Nifal Munzir May 12 '15 at 10:25
Updated my question with JSFiddle. – sridharnetha May 12 '15 at 11:29
yeah checked that. So when you click on the "Add" button you need the click event to trigger right? – Nifal Munzir May 12 '15 at 11:33
Exactly, event should be trigger by clicking on Add button. – sridharnetha May 12 '15 at 11:52
take a look at my jsFiddle on the Edited Answer – Nifal Munzir May 12 '15 at 11:54

score 3 · Answer 2 · answered May 12 '15 at 08:57

Check the Bootstrap documentation on popovers again:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
    Click to toggle popover
</button>

and in your JS:

$(function () {
    $('[data-toggle="popover"]').popover()
})

score 1 · Answer 3 · edited Oct 11 '18 at 08:16

1

$(document).on("click", "#btntest", function () {
 // your code`enter code here`
})`;`

will bind the event on the #btntest elements which are not present at the time of binding event example using ajax html data set.

edited Oct 11 '18 at 08:16

Ishita Sinha

2,168
4
25
38

answered Oct 04 '18 at 11:17

S Prajapati

51
5

$(document).on("click", "#btntest, function () { will bind the event on the #btntest elements which are not present at the time of binding event example using ajax html data set. – S Prajapati Oct 11 '18 at 04:56
this is usefull for me – Ravi Padsala Oct 11 '18 at 04:58

bootstrap popover button click event does not working using jquery

3 Answers3