Button click does not give me any data of dynamically added content

Question

Hi I am loading a table with JSON data created through Gson from database. The script is:

$(document).ready(function(){
        $.ajax({
              url:'GetProductList',
              method:'post',
              dataType:'json',
              success: function(response)   {
                    $(response).each(function(index,element){
                        $("#producttbl").append('<tr class="data-row"><td class="td-id">'+element.id+'</td><td class="td-product">'+element.product+'</td><td class="td-   type">'+element.type+'</td><td class="td-quantity">'+element.quantity+'</td><td class="td-price">'+element.price+'</td><td class="td-date">'+element.date+'</td><td class="td-date"><input type="button" value="Buy" class="buy btn-primary" onclick="postData();">        </td>    </tr>');
              }); 
      },
      error: function(response){
              alert('Error occured Could not load Data')
      }                   
  });
});

After loading this data I want to get the data in rows with class data-row on a button click event for which I have this script:

function postData()
{
    var txtname = $(this).closest(".data-row").find('.td-product').text();
    alert(txtname);
}

I am calling this function on onClick event but it gives me nothing.

Please suggest me how do I get data of the rows on click.

score 1 · Answer 1 · answered May 13 '16 at 18:49

You should use .on() for dynamically added elements.

In the doc you can see that "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

Because your element is created dynamically, you can use this on() signature to bind the event to the element:

$(document).on( eventName, selector, function(){} );

That in your case is:

$(document).on( "click", "input[type=button]", postData() );

gaetanoM · Answer 2 · 2016-05-13T19:02:13.160

Your mistake is how you wrote the HTML.

Instead of:

onclick="postData();"

you need to use:

onclick="postData(this);"

In this way your function postData becomes:

function postData(element) {

Where the element is the current value of this keyword you have to use when generating the HTML.

The snippet (I used a different url and method only for demo):

function postData(element) {
  var txtname = $(element).closest(".data-row").find('.td-product').text();
  alert(txtname);
}


$(function () {
  $.ajax({
    url: 'https://api.github.com/repositories',
    method: 'get',
    dataType: 'json',
    success: function (response) {
      $(response).each(function (index, element) {
        $("#producttbl").append('<tr class="data-row">'        +
                                '<td  class="td-id">'      + element.id        + '</td>' +
                                '<td class="td-product">'  + 'element.product' + index   + '</td>' +
                                '<td class="td-type">'     + element.type      + '</td>' +
                                '<td class="td-quantity">' + element.quantity  + '</td>' +
                                '<td class="td-price">'    + element.price     + '</td>' +
                                '<td  class="td-date">'    + element.date      + '</td>' +
                                '<td class="td-date"><input type="button" value="Buy" class="buy btn-primary" onclick="postData(this);"></td>' +
                                '</tr>');
      });
    },
    error: function (response) {
      alert('Error occured Could not load            Data')
    }

  });
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<table id="producttbl">

score 0 · Answer 3 · answered May 13 '16 at 18:49

0

Instead of onclick="postData();" put this in your script:

$(document).on("click", "input.buy.btn-primary", postData)

In postData function first check this via console.log(this);

answered May 13 '16 at 18:49

yezzz

2,990
1
10
19

i just simply want to get data of row with class="td-product" on a button click leave that postData() and simply tell how can i get text of that row on buy button click – Ankur May 13 '16 at 19:01
i see that the script is loaded before the elements are loaded in to the dom so it is not getting the element is that true? – Ankur May 13 '16 at 19:05
That depends on where you place your script. Also if you put your jquery inside document .ready then it should really matter. Read: http://stackoverflow.com/questions/6026645/document-readyfunction-vs-script-at-the-bottom-of-page – yezzz May 13 '16 at 19:20
what if i want to load custom.js after ajax call can i do this? – Ankur May 14 '16 at 03:46

Button click does not give me any data of dynamically added content

3 Answers3