附加 HTML 后如何在点击事件中检测 id答案

【问题标题】：how detect id in click event after appending HTML附加 HTML 后如何在点击事件中检测 id
【发布时间】：2019-02-23 18:56:30
【问题描述】：

我有这段代码将 html 附加到带有getPhotoUpdate ids 的 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
 });

【问题讨论】：

标签： jquery append

【解决方案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

【讨论】：

谢谢，这是真的... :)

【解决方案2】：

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

替换：

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

简单地说：

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

或者更多的 jQuery 风格：

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

【讨论】：