在使用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/搜索(控制器)

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'));
});

对你有用吗？