jQuery onclick doesn't work on a button with data-toggle and data-target

Question

EDIT : I use Bootstrap as well. No console errors

I have a button which hides and un-hides a div

<button type="button" class="btn btn-info" data-toggle="collapse" id="showBtnFullDetails" data-target="#showFullDetails" value="Dynamic">Show Responses</button>

and the Div

<div id="showFullDetails" class="collapse out">Some Data</div>

Then I have this onclick event

$("#showBtnFullDetails").click(function() {
  alert("Test");
});

But it doesn't work. On other buttons it works. Is there some explation to this? I need this button to work to hide and unhide that div as well I need it to accept onclick function coz I'll be doing other task.

I know you're bootstrap but what does it have to do with click event not working? — sertsedat, Jul 31 '15 at 13:30
Sure. You didn't include jquery library. and your function come inside Dom ready — Sudharsan S, Jul 31 '15 at 13:32
Is the ID unique? Is the element already present at runtime? There are so many possible ways things could go wrong, that's why we **always** encourage users to create a [minimal, verifiable and concrete example](http://stackoverflow.com/help/mcve). — Terry, Jul 31 '15 at 13:32
Is your jQuery code running at the end of the page or within a document ready handler? — j08691, Jul 31 '15 at 13:33
Guys, I think I know the problem now. I forgot to mention that the button is dynamically generated and not hard coded. So the problem might be the onclick event loads first before the button even appears or created. — jackhammer013, Jul 31 '15 at 13:35
Use @epascarello solution for dynamically generated button it will work — shafiq.rst, Jul 31 '15 at 13:35

epascarello · Accepted Answer · 2015-07-31T13:39:14.653

3

Use event delegation and see if that catches it.

$(document).on("click", "#showBtnFullDetails", function() {
  alert("Test");
});

Or I believe there is a shown event

$("#showFullDetails").on("show.bs.collapse shown.bs.collapse",function(event){
    alert("Test");
});

edited Jul 31 '15 at 13:39

answered Jul 31 '15 at 13:32

epascarello

204,599
20
195
236

Worked perfect :) Thanks! – jackhammer013 Jul 31 '15 at 13:44

jQuery onclick doesn't work on a button with data-toggle and data-target

1 Answers1

Linked