如何在追加HTML后检测点击事件中的id

Question

我有这个代码将html附加到带有getPhotoUpdate ID的div标签中......：

var newelement = '<div id="' + data.id + '_" class="card col-md-3">
<img src="' + data.addr + '"' + ' >' +
        '<i data-deleteId="' + data.id + '" class="icon-close btn-delete"></i></div>';

$('#getPhotoUpdate').append(newelement);

和HTML代码

<div id="getPhotoUpdate">
@foreach ($photos as $item)
    <div id="{{'k'.$item->id}}" class="card col-md-3">
        <img src="{{asset('public/'.$item->img_url)}}"
             width="100%" alt="Card image cap"
             height="200">
        <i data-deleteId="{{$item->id}}"
           class="icon-close btn-delete">
        </i>
    </div>
@endforeach

在追加之后，我想点击btn-delete按钮并删除图像;但我不知道如何将照片ID发送到点击事件！

$('#getPhotoUpdate').on('click', '.icon-close[data-deleteId]', function () {
        let id__ = $(this).children('.icon-close').attr('data-deleteId');
        console.log(id__);          //  id__ is undefined
 });

Answer 1

您已经在收听.icon-close的点击事件了。因此，您的问题是：

$(this).children('.icon-close').attr('data-deleteId');

应该：

$(this).attr('data-deleteId');

演示

$('#getPhotoUpdate').on('click', '.icon-close[data-deleteId]', function() {
  let id__ = $(this).attr('data-deleteId');
  $(`#${id__}`).remove();
});


const newelement = `
  <div id="1_" class="card col-md-3">
    <img src="http://placekitten.com/100/100" alt="">
    <i data-deleteId="1_" class="icon-close btn-delete">delete</i>
  </div>
`;


$('#getPhotoUpdate').append(newelement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="getPhotoUpdate"></div>

jsFiddle

Answer 2

您的事件的目标与您正在寻找该数据值的元素相同。

更换：

$(this).children('.icon-close').attr('data-deleteId');

简单地说：

$(this).attr('data-deleteId');

或者更多jQuery-ish：

$(this).data('deleteId');