Question

我想要在div中显示大约1000条记录。我正在以20的捆绑显示它们。当你滚动到底部时加载下20条记录。在左侧我保留了一些过滤器（javascript复选框），它将根据检查的值显示/隐藏div。屏幕上的第一个记录将使用这些复选框进行过滤。但是当我滚动并加载新的20时记录我的ajax调用的成功函数，选中的复选框或div的过滤条件对这些div不起作用。这些新记录按原样显示，没有任何过滤。我能够过滤当前页面中的记录，但如果你勾选复选框，然后滚动到底部并加载新记录。这些记录在滚动时不会被过滤。

如何为ajax加载内容进行过滤？请帮忙....

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    <body>
    <div class="content" data-name="Peter" data-price="1000" data-location="US">Peter</div><br />
    <div class="content" data-name="Willy" data-price="1200" data-location="Mexico">Willy</div><br />

    <div class="content" data-name="Peter" data-price="2000" data-location="US">Peter</div><br />
    <div class="content" data-name="Willy" data-price="800" data-location="Mexico">Peter</div><br />
    <div class="content" data-name="Willy" data-price="1300" data-location="Mexico">Willy</div><br />
    <div class="content" data-name="Peter" data-price="800" data-location="US">Willy</div><br />
<input type="checkbox" class="name" id="Peter">Peter
    <input type="checkbox" class="name" id="Willy">Willy
    <input type="checkbox" class="location" id="US">US
    <input type="checkbox" class="location" id="Mexico">Mexico

以下是我的复选框过滤逻辑

<script type="text/javascript">
    $("input.name").prop("checked", true).change(function (e) {
        $("input[name=range]:checked").trigger("change");
    });
    $("input.location").prop("checked", true).change(function (e) {
        $("input[name=range]:checked").trigger("change");
    });

    $("input[name=range]").change(function (e) {
        var toggle = this.checked;
        var range = this.value.split('-');
        var rangeFrom = parseInt(range[0]);
        var rangeTo = parseInt(range[1]);
        $(".content[data-price]").each(function(){
            var $this = $(this);
            var nameActive = $("#" + $this.data("name")).prop("checked");
//            var locationActive = $("#" + $this.data("location")).prop("checked");
            var price = parseFloat($this.data('price'));




            $this.toggle(price >= rangeFrom && price <= rangeTo 
                    && nameActive);
        });
    });

    </script>

下面是我尝试调用ajax并检索div s

<script type="text/javascript">
$(document).ready(function() {
    var page=1;
     <%String name1=(String)session.getAttribute("name");%> 
    var name2="<%=name1%>";
    $(window).scroll(function(e) 
            {if ($(window).scrollTop()+ $(window).height() == $(document).height()) 
            {page++;


            $.ajax({    type : "Get",
                        url : "Someservlet",                        
                        datatype : "JSON",
                        contentType : 'application/json',
                        data : {pagenumber : page,
                        Pname : name2},

                        success : function(data) {

                            var data1 = data[0],

                            var len = data1.length;
                            for (var i = 0; i < len; i++) {

                                        var name = "<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
                                        + "Peter" +"</div>"+"<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
                                        + "Willy" +"</div>";



                                $(name).appendTo("#prod");





                            }



                    }


                    });

        }
    });

});

                    </script>

请帮忙...

Answer 1

您必须使用on和off个事件。喜欢：

$(document).off('change',"input.name:checked").off('change',"input.name:checked",function (e) {
            $("input[name=range]:checked").trigger("change");
        });
       $(document).off('change',"input.location:checked").off('change',"input.location:checked",function(e) {
            $("input[name=range]:checked").trigger("change");
        });

        $(document).off('change',"input[name = 'range']:checked").off('change',"input[name = 'range'],function(e){ 
            var toggle = this.checked;
            var range = this.value.split('-');
            var rangeFrom = parseInt(range[0]);
            var rangeTo = parseInt(range[1]);
            $(".content[data-price]").each(function(){
                var $this = $(this);
                var nameActive = $("#" + $this.data("name")).prop("checked");
    //            var locationActive = $("#" + $this.data("location")).prop("checked");
                var price = parseFloat($this.data('price'));




                $this.toggle(price >= rangeFrom && price <= rangeTo 
                        && nameActive);
            });
        });

Answer 2

    <script type="text/javascript">
$(document).ready(function() {
    var page=1;
     <%String name1=(String)session.getAttribute("name");%> 
    var name2="<%=name1%>";
    $(window).scroll(function(e) 
            {if ($(window).scrollTop()+ $(window).height() == $(document).height()) 
            {page++;
            checkbox();

            $.ajax({    type : "Get",
                        url : "Someservlet",                        
                        datatype : "JSON",
                        contentType : 'application/json',
                        data : {pagenumber : page,
                        Pname : name2},

                        success : function(data) {

                            var data1 = data[0],

                            var len = data1.length;
                            for (var i = 0; i < len; i++) {

                                        var name = "<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
                                        + "Peter" +"</div>"+"<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
                                        + "Willy" +"</div>";



                                $(name).appendTo("#prod");





                            }



                    }


                    });

        }
    });

});
function checkBox(){

    alert("check");
    var a=$("input.name]");
    var name="";
    var location="";

     $("#prod >div").hide();

       if($(a).is(":checked")) {
           alert("brand checked");
        $('#prod >div').hide();
            name=$(this).attr('id');       
        displaydivs(name,location);
       }
   else{ brand=""
        displaydivs(name,location);
        }

}

    function displaydivs(name,location)
    {
    if(name!="" & location!=""){ 

         $("#prod >div[data-location="+location+"][data-name="+name+"]").show();

         }
         else if(name!="" & location==""){ 

         $("#prod >div[data-name="+name+"]").show();
         }
         else if(name=="" & location!=""){

         $("#prod >div[data-location="+name+"]").show();
         }
         }






                        </script>

请你检查Ehsan，

在显示div之前，即在ajax滚动之前过滤div

2 个答案: