how to access the image which is added dynamically using jquery in a table

Question

Even this question is duplicate of how to bind the dynamic elemnts still i didnt get clue for my issue.i have a code that will load the data from table using jquery (in pop-up) - dynamically. This will include the add an image for remove row operation. So i should code to remove the correspnding row when user click on that image. But my jquery flow not entering into flow when click on an image. So please help me to find the bug.

 $("#tab_logic").find("tr:gt(0)").remove(); var tableinsp = $("#tab_logic"); $.each(responseJson, function(key, value) { var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); rowNew.children().eq(0).text(value['parameters']); rowNew.children().eq(1).text(value['specifications']); rowNew.children().eq(2).html('<input type="text" list="combo-options" id="inpact10" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>'); rowNew.children().eq(3).html('<input type="text" list="combo-options" id="inpact20" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>'); rowNew.children().eq(4).html('<input type="text" list="combo-options" id="inpact30" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>'); rowNew.children().eq(5).html('<input type="text" list="combo-options" id="inpact40" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>'); rowNew.children().eq(6).html('<input type="text" list="combo-options" id="inpact50" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>'); rowNew.children().eq(7).html('<img src="delete.gif" height="42" width="42" alt="idata" class="del">'); // image row rowNew.appendTo(tableinsp); }); 

 $(document).ready(function() { $("#tab_logic").on("click", ".del", function() { alert("i am"); // add code here }); }); 

Answer 1

You can try this

$("body").on("click", "#tab_logic .del",
    function() {
      alert("i am"); // add code here 
});

Answer 2

$('button').on('click', e => { alert('you clicked a button!') })
$(document.body).append($('<button></button>').text("I've been added from JavaScript"))

If you click on the button that says I've been added from JavaScript , no alert will pop up, I think you understood that.

So, the solution is to listen click on the body , and check if the target was a button. jQuery allows you to do it like so:

$(document.body).on('click', 'button', e => { alert("you clicked a button!") })

For more about $.on() .

Without jQuery (because sometimes it's helpful to understand how to magic happens)

document.body.addEventListener('click', e => {
    // e.target is the clicked element
    // in our case, we just want to check if the tag name is `button`
    if (e.target.nodeName != 'BUTTON') {
        return // stop the function
    }

    alert("you click a button!")

})

e.target.nodeName is always upper cased (you can call .toLowerCase() upon it if you want to)