Question

您好我正在加载一个表，其中包含通过Gson从数据库创建的JSON数据。脚本是：

$(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')
      }                   
  });
});

加载此数据后，我想在按钮data-row事件中获取类click的行中的数据，我有这个脚本：

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

我在onClick事件上调用此函数，但它什么也没给我。

请建议我如何获取点击行的数据。

Answer 1

您应该使用.on()来动态添加元素。

在文档中，您可以看到“事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时页面上。”

因为您的元素是动态创建的，所以您可以使用on（）签名将事件绑定到元素：

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

在你的情况下是：

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

Answer 2

您的错误就是您编写HTML的方式。

而不是：

onclick="postData();"

你需要使用：

onclick="postData(this);"

这样你的函数postData就变成了：

function postData(element) {

元素是此关键字的当前值，您必须在生成HTML时使用。

该片段（我使用了不同的网址和方法仅用于演示）：

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

Answer 3

而不是onclick="postData();"将其放在您的脚本中：

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

在postData函数中，首先通过this

检查console.log(this);

按钮单击不会给我任何动态添加内容的数据

3 个答案: