javascript - 使用 Javascript 获取和设置动态创建的 HTML 输入的值

Question

我在 Javascript 中动态创建了“input”元素，并将“insertAfter”附加到已经创建的“div”。这些“输入”出现了，但我无法逐步获取或更改它们的值，我稍后需要使用这些值。

为目录中的每个文件添加“输入”元素，并制作“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 将返回 未定义)。您可以将所需的元素作为参数传递给函数。你可以这样做:

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