JavaScriptを使用して動的に作成されたHTML入力の値の取得と設定

Question

Javascriptで「入力」要素を動的に作成し、すでに作成した「div」に「insertAfter」を追加しています。これらの「入力」が表示されますが、後で使用する必要がある値を段階的に取得または変更することはできません。

"Input"要素はディレクトリ内のすべてのファイルに追加され、 "id"はプラスとマイナスのボタンで入力の値を取得および変更するために作成されますが、値を取得しようとすると、エラー。下記に示す使用

Uncaught TypeError: Cannot read property 'value' of null 

基本的なコードスニペット：

Javascriptを：

$.ajax({ 
    url: "http://localhost:8888/file", 
    success: function(data){ 
    var filename = this.href.replace(window.location.host, "").replace("http://", "").replace("/","").replace(".csv", "");$(data).find("a:contains(" + fileextension + ")").each(function() { 
    if(counter == 0){ 
    $('<div class="col-md-3 ' + counter + '"></div>').appendTo('#stock_types'); 
    $('<a href = "#" onclick="return false; onclick=removing();" class = "is_stock"> </a>').html(filename).appendTo('.'+ counter).attr('id', filename); 
    $('<button type="button" onclick="adding()" class = "btn btn-default plus_"> + </button>').insertAfter($("#" + filename)).attr('id','plus_'+filename); 
    $('<input class = "stock_amount" name="input_' + filename + '" id = input_'+ filename +' value = "0" ">').insertAfter($("#plus_" + filename)); 
    $('<button type="button" onclick="subtracting()" class = "btn btn-default minus_"> - </button>').insertAfter($('#input_' + filename)).attr('id','minus_'+filename); 



function adding(){ 
    raw_id = ''; 
    raw_id = raw_id + $(this).attr('id'); 
    var new_id = raw_id.replace("plus", "input"); 
    console.log(new_id); 

    current_val = document.getElementById(new_id).value; 
    current_val = current_val + 1; 

    console.log(current_val); 

}; 

私が取得し、動的に作成された入力の値をインクリメントされるための究極の目標。前もって感謝します。

Answer 1

$(this).attr('id')機能がオブジェクトに関連付けられていないため、これは機能しません（したがって、thisはundefinedを返します）。関数への引数として、必要な要素を渡すことができます。あなたは何ができる：

$('<button type="button" onclick="adding(document.querySelector('.stock_amount')[0])" class = "btn btn-default plus_"> + </button>').insertAfter($("#" + filename)).attr('id','plus_'+filename); 

や追加機能で：

function adding(input){ 
    raw_id = ''; 
    raw_id = raw_id + $(input).attr('id'); 
... 
} 

Answer 2

jQueryのは、箱から出して動的要素をサポートしています。 これは非常によく働いたonclick属性となどとバニラのJSは必要...

var btn = $('<button>', { 
    text: ' + ', 
    'class':'btn btn-default plus' 
}); 

function adding(event){ 
    // adding... 
} 

btn.on('click', adding).insertAfter($('.....whatever'));