javascript - 使用 laravel 和 ajax 实时搜索后，我的按钮中的 Data-id 属性未显示值

Question

我有一个问题。问题是，当我使用 ajax 实时搜索来搜索数据，然后单击删除按钮时，该按钮不会显示带有 data-id 属性的警报。

示例:

当我单击删除按钮时，它会加载带有值的警报

当我使用实时ajax搜索数据时，单击删除按钮后警报无法显示

index.blade.php

<table class="tabel-pelanggan highlight">
            <thead>
                <tr>
                    <th class="center-align">No</th>
                    <th class="center-align">Nama</th>
                    <th class="center-align">Nomor Hp</th>
                    <th class="center-align">Jenis Member</th>
                    <th class="center-align">Aksi</th>
                </tr>
            </thead>
            <tbody class="data-table-pelanggan">
                @foreach($pelanggan as $i => $data)
                <tr>
                    <td class="center-align">{{ ++$i }}</td>
                    <td class="center-align">{{ $data->nama }}</td>
                    <td class="center-align">{{ $data->hp }}</td>
                    <td class="center-align">{{ $data->tipe }}</td>
                    <td class="center-align">
                        <a href="{{ url('/pelanggan/'.$data->id) }}" class="waves-effect waves-light btn-small blue"><i class="material-icons">remove_red_eye</i></a>
                        <a href="#" class="waves-effect waves-light btn-small green"><i class="material-icons">edit</i></a>
                        <a href="#" data-id="{{ $data->id }}" class="waves-effect waves-light btn-small red btn-hapus"><i class="material-icons">clear</i></a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>



<script>
    $(document).ready(function() {
    //search pelanggan
            $('.key').on('keyup', function() {
                var value = $(this).val();
                searchPelanggan(value);
            });
//when i click the delete button
        $('.btn-hapus').on('click', function(e) {
            e.preventDefault();
            alert($(this).attr('data-id'));
        });

    //function
                //search realtime pelanggan
            function searchPelanggan(value) {
                $.ajax({
                    url: '/pelanggan/search',
                    method: 'get',
                    data: {
                        key: value
                    },
                    success: function(data) {
                        $('.data-table-pelanggan').html(data);
                    }
                });
            }
});
</script>

/pelanggan/search (controller)

public function search(Request $request)
{
    $key    = $request->key;
    $result = '';

    $q      = Pelanggan::where('nama', 'like', '%'.$key.'%')
                            ->where('status', '=', 'lama')                        
                            ->orderBy('created_at', 'DESC')
                            ->paginate(5);
    foreach($q as $i => $data) {
        $result .= "<tr>".
        "<td class='center-align'>".++$i."</td>".
        "<td class='center-align'>".$data->nama."</td>".
        "<td class='center-align'>".$data->hp."</td>".
        "<td class='center-align'>".$data->tipe."</td>".
        "<td class='center-align'>
                <a href='#' class='waves-effect waves-light btn-small blue'><i class='material-icons'>remove_red_eye</i></a>
                <a href='#' class='waves-effect waves-light btn-small green'><i class='material-icons'>edit</i></a>
                <a href='#' data-id='".$data->id."' class='waves-effect waves-light btn-small red btn-hapus'><i class='material-icons'>clear</i></a>
            </td>".
        "</tr>";
    }
    return response($result);   
}

希望您能帮助我，谢谢!!

Answer 1

这是因为元素本身是在第一次 DOM 评估后创建的。

替换:

$('.btn-hapus').on('click', function(e) {
    e.preventDefault();
    alert($(this).attr('data-id'));
});

与:

$('.tabel-pelanggan').on('click', '.btn-hapus', function(e) {
    e.preventDefault();
    alert($(this).attr('data-id'));
});

这对你有用吗？