CODEWITHSUNDEEP
javascriptjquery
Bhumika
Bhumika

Reputation: 35

onclick is not working in jquery

$(document).ready(function() {
    $.ajax({
        url: 'DisplayController',
        type: 'GET',
        success: function(response) {
            var trHTML = '';
            $.each(response, function(i, item) {
                trHTML += '<tr><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.price +
                    '</td><td>' + '<button id="item.id" class="btn">Delete</button>'
                '</td></tr>';
            });
            $('#delTable').append(trHTML);
        }
    });
    $('button').click(function() {
        var val = $(this).attr("id");
        console.debug("saurabh userid", val);
        var rowElement = $(this).parent().parent();
        $.ajax({
            type: "POST",
            data: {
                productid: val
            },
            url: "DisplayController",
            success: function(result) {
                rowElement.find('td').fadeOut('3000',
                    function() {
                        rowElement.remove();
                    }
                );
            }
        });
    });
});

<table id="delTable" border=1 align="center" height="150" width="200">
<thead>
        <tr>
            <th width="100">Product Name</th>
            <th width="100">Price</th>
            <th width="100">Id</th>
            <th width="100">Delete</th>

        </tr>
    </thead>


    </tbody>
</table>
    <
<!--     <p><a href="UserController?action=insert">Add User</a></p> -->

I am trying to click on the button from table with id(item.id) $('button').click but it's not working. I even tried using $('#delTable').find('tr').click but by doing this, it only works if I click on the first row and first cell of table.

Upvotes: 2

Views: 662

Answers (5)

virat
virat

Reputation: 99

Try using callback function.
This will always take the current value.

$(document).on("click", "button", function() {
    //line of code
});

Upvotes: 1

Jobelle
Jobelle

Reputation: 2834

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {

                var trHTML = "";

                for (i = 0; i < 5; i++) {
                    trHTML += '<tr><td>' + "item.name" + '</td><td>' + "item.id" + '</td><td>' + "item.price" +
                                '</td><td>' + '<button id="item.id" class="btn">Delete</button>'
                    '</td></tr>';

                    $('#delTable').append(trHTML);
                }

        $('button').click(function () {
            var val = $(this).attr("id");
            var rowElement = $(this).parent().parent();


            rowElement.find('td').fadeOut('3000',
                function () {
                    rowElement.remove();
                }
            );


        });
    });


</script>



<body>
 <table id="delTable" border=1 align="center" height="150" width="200">
<thead>
        <tr>
            <th width="100">Product Name</th>
            <th width="100">Price</th>
            <th width="100">Id</th>
            <th width="100">Delete</th>

        </tr>
    </thead>


    </tbody>
</table>
 </body>
</html>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

You should use dataType:'json' as your return data is json and your button id insert is not valid because you put in ""

   $.ajax({
    url: 'DisplayController',
    type: 'GET',
    dataType : 'json',//json return
    success: function(response) {
        var trHTML = '';
        $.each(response, function(i, item) {
            trHTML += '<tr><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.price +
                '</td><td>' + '<button id="'+item.id+'" class="btn">Delete</button>'
            '</td></tr>';//button id must like this
        });
        $('#delTable').append(trHTML);
    }
});

Also should use your ajax append element by document.on because for event trigger

 $(document).on('click','button',function() {
    var val = $(this).attr("id");
    var rowElement = $(this).parent().parent();
    $.ajax({
        type: "POST",
        data: {
            productid: val
        },
        url: "DisplayController",
        dataType : 'json',
        success: function(result) {
            rowElement.find('td').fadeOut('3000',
                function() {
                    rowElement.remove();
                }
            );
        }
    });
});

Upvotes: 0

rrk
rrk

Reputation: 15875

You need to use event delegation for adding event handlers to dynamically added html elements.

$('#delTable').on('click','button', function() {
    var val = this.id.split('_')[1];
    console.debug("saurabh userid", val);
    var rowElement = $(this).parent().parent();
    $.ajax({
        type: "POST",
        data: {
            productid: val
        },
        url: "DisplayController",
        success: function(result) {
            rowElement.find('td').fadeOut('3000',
                function() {
                    rowElement.remove();
                }
            );
        }
    });
})

and use proper concatenation for the getting different id's

$.each(response, function(i, item) {
    trHTML += '<tr><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.price +
        '</td><td>' + '<button id="id_' + item.id + '" class="btn">Delete</button>'
        '</td></tr>';
});

Upvotes: 4

Fyntasia
Fyntasia

Reputation: 1143

If your buttons are added to the DOM dynamically, you might want to try the 

$('button').on('click', function(){
    // Your logic
});

function.

Upvotes: 0

Related Questions