Question

我有这段代码可以将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发送给click事件！

$('#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的版本：

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

附加HTML后如何在点击事件中检测ID

2 个答案: