CODEWITHSUNDEEP
jquery
Ankur
Ankur

Reputation: 29

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

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.

Upvotes: 1

Views: 42

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

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">

Upvotes: 1

yezzz
yezzz

Reputation: 3020

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

Upvotes: 0

user4262528
user4262528

Reputation:

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() );

Upvotes: 1

Related Questions