Javascript在JSFIDLE中工作，但在ASP.net中不工作

我想通过单击列表项中的一列/字符串来筛选项目列表。当我单击“销售”时，仅显示“销售”类别列表中的项目。当我再次单击“销售”时，列表中的所有项目都将显示

它就像我想要的一样

但是为什么它不能在ASP.net上的Visual Studio中工作呢？它抛出异常

...
var a = p.getElementsByTagName("a")[0];
...

这是我的HTML代码：

<div data-role="page" id="page1">
    <div data-role="content">
        <ul data-role="listview" data-inset="false" data-filter="true" id="testList">
            <li data-icon="false">
                <p class="ui-li-heading"> 
                  <strong> 1</strong>
                </p>

                <p class="ui-li-aside"> 
                    <span>
                        <a href="javascript:void(0)" class="areaItem" id="areaItem">Sales</a>
                        &nbsp;
                        &nbsp;
                    </span>
 <span class="ui-icon ui-icon-gear" style="display: inline-block;"></span>
 <span class="ui-icon ui-icon-check" style="display: inline-block;"></span>    
                </p>
            </li>
  </div>
</div>

1

这是我的Javascript：

var filtered = 0;

$(".areaItem").click(function () {
    var SearchTerm = $(this).text();

    var ul = document.getElementById("testList");
    var liArray = ul.getElementsByTagName("li");

    for(var i=0; i<liArray.length; i++) {
        var p = liArray[i].getElementsByTagName("p")[0];
        var a = p.getElementsByTagName("a")[0];

        if(filtered == 1) {
            $(liArray[i]).show();
        } else {
            if(a.text.localeCompare(SearchTerm) != 0) {
                $(liArray[i]).hide();
            }
        }
    }

    if (filtered == 0) {
        filtered = 1;
    } else {
        filtered = 0;
    }
});

$(document).ready(function () { //Make sure doc is loaded
   var list = $("#testList");
   var listItems = $(list).find("li"); //could also do $("#listtest li);

   $(".areaItem").click(function () {
       var parentLi = $(this).closest("li");   //Get li that encloses clicked item 
       $(listItems).not(parentLi).toggle();    //Toggle display of other li
   });
});

var-filtered=0；
$（“.areaItem”）。单击（函数（）{
var SearchTerm=$（this.text（）；
var ul=document.getElementById（“测试列表”）；
var liArray=ul.getElementsByTagName（“li”）；
对于（var i=0；i我过去也遇到过类似的问题：问题在于ASP.NET页面的生命周期以及在元素之前解析javascript已在DOM中创建。由于您正试图将单击处理程序绑定到
.areaItem
类，因此解析函数时，该类的成员元素必须在DOM中都可用

根据记忆，我想我最终将点击权委托给了文档：

$(document).on(click, ".areaItem", function() { <function content> });

我将首先重构您的javascript：

var filtered = 0;

$(".areaItem").click(function () {
    var SearchTerm = $(this).text();

    var ul = document.getElementById("testList");
    var liArray = ul.getElementsByTagName("li");

    for(var i=0; i<liArray.length; i++) {
        var p = liArray[i].getElementsByTagName("p")[0];
        var a = p.getElementsByTagName("a")[0];

        if(filtered == 1) {
            $(liArray[i]).show();
        } else {
            if(a.text.localeCompare(SearchTerm) != 0) {
                $(liArray[i]).hide();
            }
        }
    }

    if (filtered == 0) {
        filtered = 1;
    } else {
        filtered = 0;
    }
});

$(document).ready(function () { //Make sure doc is loaded
   var list = $("#testList");
   var listItems = $(list).find("li"); //could also do $("#listtest li);

   $(".areaItem").click(function () {
       var parentLi = $(this).closest("li");   //Get li that encloses clicked item 
       $(listItems).not(parentLi).toggle();    //Toggle display of other li
   });
});

它更简单，更符合jQuery的使用方式

见：

这本身不足以解决您的问题。请仔细检查页面中呈现的内容。特别是检查
id
，因为ASP.net因损坏id而臭名昭著。有关详细信息，请使用Google ASP.net名称损坏和ASP.net id损坏。如果您的id损坏，请在脚本中使用以下内容

var list = $('#<%= YourListElement.ClientID%>');

见：

更新2

我已经更新了上面的代码和fiddle，使基于注释的解决方案更加健壮。看起来，
a
标记在最终呈现中不存在。代码更改现在将基于CSS类而不是标记进行搜索。
我带来的解决方案对我来说有点不可思议，因为我是javascript新手。
在IE中一切正常，但在Chrome中，所有li在单击后消失

var filtered = 0;

        $(".areaItem").click(function () {
            var SearchTerm = $(this).text();

            $('#testList > li').each(function () {
                var a = $(this).find("a").attr("id","areaItem");

                //alert(a[0].innerHTML);

                if (filtered == 1) {
                    $(this).show();
                } else {
                    //alert(a.text());
                    if (a[0].innerHTML.localeCompare(SearchTerm) != 0) {
                        $(this).hide();
                    }
                }

            });


            if (filtered == 0) {
                filtered = 1;
            } else {
                filtered = 0;
            }
        });

您是否调试以检查
p
元素是否存在？是否确定
p
中存在
a
元素？如果没有，则抛出错误，因为您正在有效地尝试分配
a=未定义[0]；
它在JSFIDLE中正常工作。在visual studio中，p元素在innerHTML字段中的内容正是我想要的。我认为您需要包装jQuery代码“$（function（）{$（“.areaItem”）…}”，以确保“areaItem”元素在DOM中可用。什么意思是它在visual studio中不起作用？您是否尝试在VS中调试代码？visual studio不应运行任何javascript代码。您是否使用IE测试您的站点？我尝试了您的解决方案，该解决方案看起来确实更好，但在.net中不起作用，当我单击任何“areaItem”时，所有li都会消失。我在这里它中有一些调试警报：。这可能会帮助您找出问题所在。请检查浏览器中呈现到页面的HTML（查看源代码，或使用firefox的firebug）。列表项中是否有
a
标记？如果没有，这也会导致最初的问题。