Why did not work jQuery button in this code

Question

https://i.stack.imgur.com/3nrr5.png

what is my mistake ? why this click function is did not work ? i made this function without each loop, then that function working properly, but why did not work this place ?

<html>
<head>
    <title> NG - REPEAT </title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>VERSION</th>
                <th>PRICE</th>
                <th>ACTION</th>
            </tr>
        </thead>
        <tbody class="tr">

        </tbody>
    </table>
    <script>

        $(document).ready(function()
        {
            $.ajax({
                url:'data.json',
                dataType:'json',
                success: function(data)
                {
                        console.log(data);
                    $.each(data.product, function(name, value)
                    {
                        var result = '<tr><td>'+name+'</td><td>'+value.name+'</td> <td>'+value.version+'</td> <td>'+value.price+'</td><td><button id="btn">Load</button></td></tr>';
                        $(".tr").append(result);
                    });
                }
            });

            $("button").click(function(){
                alert("hi");
            });
        });
    </script>

</body>

Well he is not looking on HOW to make an event, but WHY it does not work — Dylan KAS, Jul 24 '19 at 07:15

score 1 · Accepted Answer · answered Jul 24 '19 at 07:15

1

You need to add your event listener after your loop creating buttons, so do something like :

$(document).ready(function()
        {
            $.ajax({
                url:'data.json',
                dataType:'json',
                success: function(data)
                {
                        console.log(data);
                    $.each(data.product, function(name, value)
                    {
                        var result = '<tr><td>'+name+'</td><td>'+value.name+'</td> <td>'+value.version+'</td> <td>'+value.price+'</td><td><button id="btn">Load</button></td></tr>';
                        $(".tr").append(result);
                    });
                    $("button").click(function(){
                     alert("hi");
                    });
                }
            });


        });

answered Jul 24 '19 at 07:15

Dylan KAS

4,840
2
15
33

dear sir, im beginner for jQuery, can you explain more with example please – Software Engineer Jul 24 '19 at 07:47
Did it work ? Or not ? – Dylan KAS Jul 24 '19 at 07:48
wow sir, it's workin correctly, your exellent sir, im very happy sir, thansk a lot.................................................................................., thanks to stackoverflow also – Software Engineer Jul 24 '19 at 08:06
Feel free to validate the answer if that's the case, your problem was that you were adding an event listener before creating the button, so not event where attached to your buttons. – Dylan KAS Jul 24 '19 at 08:08

Why did not work jQuery button in this code

1 Answers1