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

javascript jquery html twitter-bootstrap

10,198

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");
});

10,198

Author by

jackhammer013

Noob

Updated on June 14, 2022

Comments

jackhammer013 almost 2 years
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.
- depperm almost 9 years
  
  does the console say anything?
- jackhammer013 almost 9 years
  
  No errors. The hide and unhide works fine as well.
- sertsedat almost 9 years
  
  jsfiddle.net/7dqhvxzm it is working?
- jackhammer013 almost 9 years
  
  @jackjop I'm with Bootstrap Sir.
- sertsedat almost 9 years
  
  placing script anywhere below the button might work
- sertsedat almost 9 years
  
  I know you're bootstrap but what does it have to do with click event not working?
- jackhammer013 almost 9 years
  
  @jackjop I dunno. It just doesn't work :(
- messerbill almost 9 years
  
  can you post the code around this click handler plz?
- Sudharsan S almost 9 years
  
  Sure. You didn't include jquery library. and your function come inside Dom ready
- Terry almost 9 years
  
  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.
- j08691 almost 9 years
  
  Is your jQuery code running at the end of the page or within a document ready handler?
- jackhammer013 almost 9 years
  
  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.
- shafiq.rst almost 9 years
  
  Use @epascarello solution for dynamically generated button it will work
jackhammer013 almost 9 years

Worked perfect :) Thanks!