Why javascript actionlink function under ajax not work in mvc

Question

Under an ajax get method i need to generate table programatically.why actionlink not work with my table

ajax method

       $(document).ready(function () {
//click event
            $('.delete-logo').on('click', function () {

                var id = $(this).data('key');
                alert(id);
            });
//click event               
            $('.edit-logo').on('click', function () {

                var id = $(this).data('key');
                alert(id);
            });

            $('.submitDetailForm').on('click', function () {                

            //get value from control
                var ProductID = $('#ProductID').val();
                var Qty = $('#Qty').val();
                var Unit = $('#Unit').val();
                var Amount = $('#Amount').val();
                var ICMS = $('#ICMS').val();
                var IPI = $('#IPI').val();
                var ProductName = $('#ProductID option:selected').text();


                var booksDiv = $("#booksDiv");
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: '@Url.Action("AddToCard", "Sales")',
                    data: { ProductID: ProductID, ProductName: ProductName, Qty: Qty, Unit: Unit, Amount: Amount, ICMS: ICMS, IPI: IPI },
                    success: function (data) {
                        console.log(data);
                        var result = "";
                        booksDiv.html('');
                        $.each(data, function (SalesOrderID, OrderDetails) {

                            result += '<tr> <td>' + OrderDetails.Name + '</td>' +
                                '<td>' + OrderDetails.Qty + '</td>' +
                                '<td>' + OrderDetails.Unit + '</td>' +
                                '<td>' + OrderDetails.Amount + '</td>' +
                                '<td>' + OrderDetails.ICMS + '</td>' +
                                '<td>' + OrderDetails.IPI + '</td>' +
                                '<td><a class="edit-logo" data-key=' + OrderDetails.SalesOrderDetailID + ' href="javascript:void(0);">' + 'Edit' + '</a></td>' +
                                '<td><a class="delete-logo" data-key=' + OrderDetails.SalesOrderDetailID + ' href="javascript:void(0);">' + 'Delete' + '</a></td>' +
                                ' </tr>';
                        });
booksDiv.html(result);

                    },
                    error: function (xhr, AJAXOptions, thrownError) {
                        alert('Failed to retrieve books.');
                    }
                });
            });
        });

Hyper link content

    '<td><a class="edit-logo" data-key=' + OrderDetails.SalesOrderDetailID + ' href="javascript:void(0);">' + 'Edit' + '</a></td>' 

'<td><a class="delete-logo" data-key=' + OrderDetails.SalesOrderDetailID + ' href="javascript:void(0);">' + 'Delete' + '</a></td>'

hyperlink display perfectly in browser but can not invoke click events

why my actionlink click event are not fired?

user3559349 · Accepted Answer · 2015-12-19 05:10:45Z

1

You need to use event delegation (using the .on() function) when adding dynamic content

$('#booksDiv').on('click', '.delete-logo', function() {
  ....
});
$('#booksDiv').on('click', '.edit-logo', function() {
  ....
});

where the element with id="booksDiv" is the closest ancestor that exists when the page is first generated.

Side note: Rather than manually generating your javascript object, you can simply use data: $('form').serialize(),

answered Dec 19, 2015 at 5:10

user3559349

Sign up to request clarification or add additional context in comments.

1 Comment

shamim Over a year ago

Stephen muecke thanks for your valuable information.

Collectives™ on Stack Overflow

Why javascript actionlink function under ajax not work in mvc

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related