0

I'm creating a table dynamically with first row as textbox . HTML

<input type="button" id="btncreate" value="create" />

<div id="htmltable">

</div>

Jquery

$(document).ready(function() {

 create();

 });

 $(function() {
  $('#btncreate').click(function() {

     create();
   });
   $("#txtSearchPicklistNo").keyup(function() {
     alert($(this).val());
   });
 });


 function create() {
   $('#htmltable').append("<table  class='table table-striped table-bordered'></table>");

   var table = $('#htmltable').children();
   table.append("<thead>");
   table.append("<tr>");
   table.append("<th style='width:25px;'>SNo </th>");
   table.append("<th style='width:75px;'>Picklist No</th>");

   table.append("</tr>");
   table.append("</thead>");
   //   table.append($("<td/>").html('<input type="text" class="unitprice" name="unit_price" id="unit_price"/>'));
   table.append("<tbody><tr><td></td><td><input type='text' id='txtSearchPicklistNo'  style='font-size: x-small; height: 13px;' /></td></tr></tbody>");

 }

In the above javasript ,I have a create function which will create a table dynamically when user click on create button.In that table first row as a textbox which id as 'txtSearchPicklistNo'

The issue is keyup event is not firing when i call create function with in button click event $('#btncreate').click(function() {create(); });. but the same function is working as much as expected when it is called from $(document).ready(function() {create();});

Please check the fiddler also, https://jsfiddle.net/King_Fisher/a7v7tc5L/2/

how do i fix this?

King_Fisher
  • 1,171
  • 8
  • 21
  • 51
  • @Rajaprabhu Aravindasamy i can also able to see that related questions, do you think I didn't see that. If i googled about this ,there are lot of things but i could not find solution ,that's why i came here. – King_Fisher Mar 27 '16 at 10:41
  • 1
    https://jsfiddle.net/a7v7tc5L/3/ You can find a solution easily if you patiently read the question I have linked. – Rajaprabhu Aravindasamy Mar 27 '16 at 10:44
  • thank you,but please understand we are not expert as like you. i got stuck here for almost 3 hours. that's why i came here. – King_Fisher Mar 27 '16 at 10:48
  • @RajaprabhuAravindasamy $('.buttons').on('click', 'button', function(){ // do something }); i dont understand ,he mentioned buttons two times,in this how do i find which is parent id and child id? – King_Fisher Mar 27 '16 at 10:53
  • [Read it](https://learn.jquery.com/events/event-delegation/). I hope you will understand about event delegation. – Rajaprabhu Aravindasamy Mar 27 '16 at 10:57
  • thanks @RajaprabhuAravindasamy – King_Fisher Mar 27 '16 at 11:12
  • `$('.buttons').on('click', 'button', function(){ // do something });` In this example, `.button` is the parent element of the `button` and that is a static one. Meaning that should not be added during runtime. And the next `button` is the selector for the element which was added during runtime and going to trigger the event. – Rajaprabhu Aravindasamy Mar 27 '16 at 11:15
  • I have one more doubt, How do i get that textbox value in create button click event? @RajaprabhuAravindasamy – King_Fisher Mar 27 '16 at 11:28

0 Answers0