Copying Rows in Datatable and refresh DOM after prepend input element

Question

I have 2 Datatable tables.

When I double click one row

//// Mov table 1 to 0
$('#DataTable1 tbody').on('dblclick', 'tr', function (event) {

It copies all origin row data to destiny table.

//create array
  var data = [];
//pushes data to array
  $(this).find('td').each(function () { data.push($(this).text()); });
//add row to destiny table
  dt.row.add(data);
//draw table
  dt.draw(false);

Ok, so far so good... I can insert "data-" .attr() to rows, and use JQuery in them.

Now I need to append an "input" to two specific tds... It is a success:

var input_pos = '<input type="number" class="edit-items" max="'+xpto+'" data-proj-signal="1"/>';

var input_neg = '<input type="number" class="edit-items" max="'+xpto2+'" data-proj-signal="-1"/>';

I select the row using normal sintax and prepend the desired html code.

cell.parent('tr').find('td').eq(3).prepend(input_pos);
cell.parent('tr').find('td').eq(4).prepend(input_neg);

And voilá... everything is in the place it should be... BUT, when I try to call javascript/Jquery on the newly inserted inputs, it simply doesn´t do nothing. I thought that because it is inside a .on(), it would refresh the DOM after the prepend(), but it doesn't look like he did...

How do I do this? Is there a way to insert this inputs along with "data"? How to refresh DOM so that I can use their value in Javascript/Jquery?

PS I created a funciton to iterate for each inputs and they are in DOm, and visible to the function:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

<script>


    function doFunction() {


        $('.edit-items').each(function () { alert($(this).attr("data-proj-signal")) });


    }

</script>

Nothing happens when I start inserting values in the preppended inputs, when the following should be triggered (and is triggered when the input is not those preppended):

$(".edit-items").on("input", function (e) { // do stuff }

Thank you very much

Answer 1

There is a problem with Bubbling of the first on() method.

//// Mov table 1 to 0
$('#DataTable1 tbody').on('dblclick', 'tr', function (event) {

It only Bubbles to "#DataTable1 tbody". Being the new row in a different table, the listener (second .on() )

$(".edit-items").on("input", function (e) { // do stuff }

does not know that it was added a new element.

Just put a common HTML parent to both tables and the problem is solved. In this example just adding "body" to the first .on() did the trick.

$('body #projDataTable1 tbody').on('dblclick', 'tr', function (event) {

Now the prepend is known until body element, and so the second .on() is informed of it.