Проблема манипулирования добавленными элементами html

Question

Я видел некоторые подобные вопросы, но до сих пор не могу их получить.

$(function() { 
    var csrf = $('input[name=_token]').val(); 
    $.ajax({ 
     async: false, 
     url: "../public/currentfile",     
     dataType: 'json', 
     method:'POST', 
     data: {"_token": csrf}, 
     complete: function(data) { 
      console.log(data.responseJSON); 
      var created_at = data.responseJSON['created_at']; 
      var filesize = data.responseJSON['filesize']; 
      var filename = data.responseJSON['filename']; 
      var fileid = data.responseJSON['fileid']; 
      $("#results .toBeSelected").prepend("<tr class='tabledata newdata'><td>" + fileid + "</td><td>" + filename + "</td><td>" + filesize + "</td><td>" + created_at + "</td></tr>"); 
     }      
    }); 
}); 

Это запрос AJAX, который добавляет html. В отдельном файле я использую контекстное меню JS. Но то, что пользователь нажимает в контекстном меню, не влияет на добавленный html. Как я могу манипулировать новым элементом html? Я кое-что прочитал о .on().

Выходной HTML - это строка таблицы. Когда пользователь щелкает правой кнопкой мыши вновь добавленный строку таблицы, этот AJAX должен выполнить:

function getImage(){ 
    var classElements = document.querySelectorAll("tr.ui-selected td.filename"); 
    var csrf = $('input[name=_token]').val(); 

    var result; 
    result = classElements[0].innerHTML; 
    $.ajax({ 
     async: true,      
     method: 'POST', 
     dataType: 'json', 
     url: '../public/selecteduserfiles', 
     data: {filename: result, "_token": csrf}, 
     complete: function(response) { 
      console.log(response.responseJSON);     
      $("img.getImage").attr('src', response.responseJSON);     
     } 
    }); 
}); 

Answer 1

Вместо строки, вы можете создать объект DOM со всеми свойствами и атрибутами вам нужно, и затем добавить/предварять их:

var domObj = $('<tr/>') 
       .addClass('tabledata newdata') 
       .append('<td>" + fileid + "</td><td>" + filename + "</td><td>" + filesize + "</td><td>" + created_at + "</td>') 
       .on('click', function() { /* do something */ }); 
$("#results .toBeSelected").prepend(domObj); 

Answer 2

on() называется делегированием событий.

Описание: Прикрепите функцию обработчика событий для одного или нескольких событий к выбранным элементам.

Если вы хотите прикрепить событие click к новым элементам, добавленным javascript, то вы имеете дело со свежими DOM, и вы должны использовать делегирование событий.

Пример пыльника прикрепить нажмите событие к новой строке с классом tabledata:

$("body").on("click", ".tabledata", function() { 
    //Your code here 
}); 

Надеется, что это помогает.