I am working in wordpress and my ajax function result showed one button whose html is mentioned below. Now I want to run a click event on that button but when I click it nothing happens. Below is the html and jquery code of the button I am using and kindly note that this button is shown as a result of an ajax operation. Secondly the div that I am trying to unhide is also result of ajax call that is also dynamic and I don't know if jquery display:block will work on it or not. Kindly suggest in this ... thanks !!


<input style="background-color:purple" id="readmore" type="button" value="Readmore!!" name="mybutton">


jQuery("#readmore").on('click', function(e){
    alert("you clicked the button");

Your button was added dynamically. So you can not bind event in simple way. As button is added after DOM is fully ready.

You need to bind it with the refrence of document or body

jQuery(document).on('click', '#readmore', function(e){
    alert("you clicked the button");
    jQuery("#bodytext").css("display", "block");

Read more about it here

| improve this answer | |
  • sumit I have added your code within document.ready but I click on readmore button nothing happens – Zeeshan Apr 25 '15 at 11:47
  • Did you try: $(document).ready(function(){ $('#readmore').click(function(){ e.preventDefault(); alert("you clicked the button"); $('#bodytext').css('display','block'); }) }) ? – Samuel Elh Apr 25 '15 at 12:04
  • yes I have tried this ... but let me tell you that I hide it like this in my theme options custom css #bodytext {display:none;} – Zeeshan Apr 25 '15 at 12:14
  • Check your console @Zeeshan – Sumit Apr 25 '15 at 12:30
  • there are no errors either in console by inspecting the page – Zeeshan Apr 25 '15 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.