Why dont work jquery functions after fill table with ajax call?

Question

 <script type="text/javascript">

        $(document).ready(function () {

            $(".inline").colorbox({ inline: true, top: 50, left: 350, height: 400 });

            $(".tbllist .malzlist").mouseover(function () {
                $(".tbllist .malzlist").css("background-color", "white"); //this function dont work
                $(this).css("background-color", "yellow");

            });


            $(".tbllist .malzlist").dblclick(function () { //this function dont work

                var malznumber = $(this).children().first().text();
                $("#txtMatnr").val(malznumber);
                $.colorbox.close();

            });


            $('#txtMatnr').keyup(function (e) {
                if (e.which == 13) {

                    var MalzNo = $('#txtMatnr').val();

                    $.ajax({
                        type: "POST",
                        url: "Default2.aspx/GetQueryInfo",
                        async: false,
                        data: "{MalzemeNo:'" + MalzNo + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            var objdata = $.parseJSON(data.d);

                            $.each(objdata, function () {
                                $(".tbllist > tbody:last").append('<tr class="malzlist">');
                                $.each(this, function (k, v) {
                                    $(".tbllist tr:last").append("<td>" + v + "</td>");
                                });
                                $(".tbllist > tbody:last").append("</tr>");
                            });
                        }
                    });

                    $(".inline").click();
                }
            });
        });
    </script>

My table lines after ajax call;

<table class="tbllist">
<tr class="malzlist"><td>000000000000000018</td><td>upa1</td></tr>
<tr class="malzlist"><td>000000000000000018</td><td>upa1</td></tr>
</table>

When I fill table with ajax call ,two function(I write with comment) dont work,I think page dont see inserted line by ajax call.When I fill table directly in html(without ajax call), Its workCan you help me please?

You're right the problem is that whenever you bind the event, the elements don't exist yet, so no event is bound to them. That's typically a situation where you should use "Delegated events" , as explained in [jQuery doc](http://api.jquery.com/on/). — Laurent S., Sep 05 '14 at 12:12

wrxsti · Accepted Answer · 2014-09-05T12:23:26.280

Any content that is dynamically loaded into the page will not have event listeners applied to them. The way to get around this is by applying the listeners to the document like so:

$(document).on('mouseover', '.tbllist .malzlist', function(){
   $(this).css("background-color", "white");
   $(this).css("background-color", "yellow");
});

$(document).on('dblclick', '.tbllist .malzlist', function(){
   var malznumber = $(this).children().first().text();
   $("#txtMatnr").val(malznumber);
   $.colorbox.close();
});

Do this with your other functions and they should work as well. Here is some more in depth information on the .on() method, and event delegation. http://api.jquery.com/on/ Hope this helps!

Why dont work jquery functions after fill table with ajax call?

1 Answers1