Werte für dynamisch erstellte HTML-Eingaben mit Javascript erhalten und setzen

Question

Ich habe "Eingabe" -Elemente dynamisch in Javascript erstellt und angehängt und "insertAfter" an ein "div" bereits erstellt. Diese "Eingaben" erscheinen, aber ich bin nicht in der Lage, ihre Werte schrittweise zu bekommen oder zu ändern, die ich später verwenden müsste.

"Input" -Elemente werden für jede Datei im Verzeichnis hinzugefügt und "IDs" werden gemacht, um die Werte der Eingabe mit Plus- und Minus-Tasten zu erhalten und zu ändern, aber wenn ich versuche, den Wert zu bekommen, bekomme ich das Error.

Uncaught TypeError: Cannot read property 'value' of null 

Die grundlegenden Code-Schnipsel sind unten dargestellt:

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

}; 

Das ultimative Ziel für mich den Wert eines Eingangs wird immer und Erhöhen die dynamisch erstellt wird. Danke im Voraus.

Answer 1

$(this).attr('id') Das wird nicht funktionieren, da hat sich die Funktion auf ein beliebiges Objekt nicht angebracht worden ist (So this wird undefined zurück). Sie können das gewünschte Element als Argument an die Funktion übergeben. Sie tun können:

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

und in der Zugabe Funktion:

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

Answer 2

jQuery aus der Box dynamische Elemente unterstützt. Es gibt keine Notwendigkeit für Vanille-js mit onclick Attributen und etc ...

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

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

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