0

I have a readmore button which is generated with Ajax and now I am using below code to execute a click event from this button, but nothing happens.

The button when clicked should unhide a div which is also dynamic and generated with Ajax. So this is all dynamic content I am dealing any ideas please. Thanks.

jQuery:

jQuery(document).on('click', '#readmore', function(e){
    e.preventDefault();
    alert("you clicked the button");
    jQuery("#bodytext").css("display", "block");
});
mins
  • 6,478
  • 12
  • 56
  • 75
Zeeshan
  • 323
  • 1
  • 7
  • 23
  • Duplicate: http://stackoverflow.com/q/29863405/2025923 – Tushar Apr 25 '15 at 12:05
  • Tushar nobody is replying me there what should I do ... please suggest – Zeeshan Apr 25 '15 at 12:06
  • http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements Read This. – Tushar Apr 25 '15 at 12:06
  • I the code you posted also coming with the ajax request? – Cristik Apr 25 '15 at 12:09
  • Btw, preventing default in this case does nothing. The event has already bubbled all the way up to document in this case, since it's a delegated event. Not the problem, but still... Also see reference about why binding to document with delegates is bad http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document – Taplar Apr 25 '15 at 12:11

1 Answers1

0

You have 2 options to make it work,

  1. convert your button to hyperlink as e.preventDefault will prevent to click of button as it is its default behavior.
  2. Remove the e.preventDefault() from your code.

Also make sure your have included any latest version of jquery. And write your code in $.ready() like,

$(function(){
    // your code here
});

Now, try to use any one option from the above.

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • Thanks Rohan let me try – Zeeshan Apr 25 '15 at 12:23
  • I have removed e.preventDefault() but still no response from the page jQuery(document).on('click', "#readmore", function () { alert("you clicked the button"); jQuery("#bodytext").css("display", "block"); }); – Zeeshan Apr 25 '15 at 12:26
  • let me try your other suggestion to convert it to a hyperlink and I will keep href value to empty – Zeeshan Apr 25 '15 at 12:29
  • I'll give the same id=readmore' – Zeeshan Apr 25 '15 at 12:30
  • Rohan both the solutions are not working – Zeeshan Apr 25 '15 at 12:31
  • Now, try my updated answer – Rohan Kumar Apr 25 '15 at 12:39
  • Rohan .... did I tell you that I am working in wordpress so using first option below is my jquery now jQuery(function($){ $(document).on('click', "#readmore", function () { alert("you clicked the button"); jQuery("#bodytext").css("display", "block"); }); }); – Zeeshan Apr 25 '15 at 12:52
  • Don't use `$` if you are using then pass `jQuery` in self called function like `;(function(){/* your code here */})(jQuery);` otherwise try to use `jQuery` not `$`. And use `.show();` not `.css("display", "block");` – Rohan Kumar Apr 25 '15 at 12:55
  • ok Thanks Rohan .... let me try – Zeeshan Apr 25 '15 at 12:59
  • Rohan it did not work here is my code now jQuery(function(){ jQuery(document).on('click', "#readmore", function () { //e.preventDefault(); alert("you clicked the button"); jQuery("#bodytext").show(); }); }); – Zeeshan Apr 25 '15 at 13:07
  • Rohan ... just an idea that if jquery is not working so is there any hover functionality in css3 that can display the div on hovering on the readmore button. – Zeeshan Apr 25 '15 at 13:39
  • will something like this work #bodytext {display:none;} #readmore:hover #bodytext {display:block;} – Zeeshan Apr 25 '15 at 13:46