如何访问使用表中的jquery动态添加的图像

时间:2017-03-14 06:40:40

标签: javascript jquery

即使这个问题是如何绑定动态元素的重复仍然我没有得到我的问题的线索。我有一个代码将使用jquery(在弹出窗口中)从表​​加载数据 - 动态。这将包括添加图像以删除行操作。因此,我应编写代码以在用户单击该图像时删除相应的行。但是当点击图像时,我的jquery流程没有进入流程。所以请帮我找到错误。



$("#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);
});
&#13;
&#13;
&#13;

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

2 个答案:

答案 0 :(得分:1)

你可以试试这个

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

答案 1 :(得分:1)

YV12

如果您点击显示$('button').on('click', e => { alert('you clicked a button!') }) $(document.body).append($('<button></button>').text("I've been added from JavaScript")) 的按钮,则不会显示任何提醒,我认为您理解这一点。

因此,解决方案是侦听身体上的 ,并检查目标是否为按钮。 jQuery允许你这样做:

I've been added from JavaScript

有关$.on()的更多信息。

没有jQuery(因为有时理解如何发生魔法会有帮助)

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

})

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