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>

在ajax调用之后我的表行;

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

当我用ajax调用填充表时，两个函数（我用注释写）不工作，我认为页面看不到通过ajax调用插入行。当我直接在html中填充表（没有ajax调用）时，它的工作可以帮助你我好吗？

Answer 1

动态加载到页面中的任何内容都不会应用事件侦听器。解决这个问题的方法是将听众应用于document，如下所示：

$(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();
});

使用其他功能执行此操作，它们也可以正常工作。以下是有关.on()方法和事件委派的更深入信息。 http://api.jquery.com/on/希望这会有所帮助！

为什么在使用ajax调用填充表后不使用jquery函数？

1 个答案: