ボタンクリックで動的に追加されたコンテンツのデータが表示されない

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（）を呼び出した時点でページに存在する必要があります」ということがわかります。

あなたの要素を動的に作成されているので、あなたは、要素にイベントをバインドする（）署名にこれを使用することができます：あなたのケースであることを

$(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を生成する際に使用するキーワードです。

スニペット（私は別のURLのみデモの方法を使用）：POSTDATAで

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

：スクリプトでこれを入れonclick="postData();"の代わりに

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

をファンクションファーストチェックthis via console.log(this);