waktu tersisa untuk klaim Potongan harga Rp 300.000 dalam program Membership. Klaim Promo!

Pada saat sesudah menambahkan data dengan method Append, fungsi button tidak mengeluarkan Alert.

Ditanyakan 5 bulan yang lalu oleh Azmi Farhan Edit  Hapus  Buka Kembali  Tandai 

Penambahan teks Depok sesudah teks Bandung sudah sukses di tambahkan dengan Method Append, namun fungsi button nya tidak berjalan dan tidak mengeluarkan "Alert". bisa di bantu, ini source code nya dibawah...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan Jquery</title>
</head>
<body>
<h1>Kamu ingin berwisata bersama orang tersayang?</h1>
        <p>Silahkan Pilih Tujuannmu</p>
        <ul class="tujuan"><li>Bandung <button class="tombol">Kunjungi</button></li>
        </ul>
        <button class="btn-append">Tempel</button>
    </ul>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
   $(document).ready(function()
            {
                var depok = `<li>depok<button class="tombol">Kunjungi</button></li>`;
                $(".btn-append").on("click", function()
                {
                    $('.tujuan').append(depok);
                });
                $(".tombol").on("click", function()
                {
                    alert("Kamu Yakin Pilih berwisata kesana?");
                });
            });

    </script>
</body>
</html>

ini gambar outputnya : https://ibb.co/gP5tYTx

1 JAWABAN / 4 KOMENTAR

User avatar

Jquery on click hanya berlaku / bisa dipasang ketika DOM sudah di load pertama kali. Tidak akan berlaku untuk dokumen yang diciptakan di tengah-tengah pakai append. Nah, untuk menyisipkan event handler untuk element yang baru kakak bisa ganti sedikit kodenya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan Jquery</title>
</head>
<body>
    <h1>Kamu ingin berwisata bersama orang tersayang?</h1>
    <p>Silahkan Pilih Tujuannmu</p>
    <ul class="tujuan">
        <li>Bandung <button class="tombol">Kunjungi</button></li>
    </ul>
    <button class="btn-append">Tempel</button>

    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <script>
    $(document).ready(function()
    {
        var depok = `<li>depok<button class="tombol">Kunjungi</button></li>`;
        $(".btn-append").on("click", function()
        {
            $('.tujuan').append(depok);
        });

        $(document).on('click', '.tombol', function()
        {
            alert("Kamu Yakin Pilih berwisata kesana?");
        });
    });

    </script>
</body>
</html>

Cobain kodenya, tinggal ganti jadi document on click.