使用jQuery AJAX load方法时出现Cannot read property 'indexOf' of undefined错误

这个错误的根源其实很好定位——你把点击事件绑定在了<li class="btnSwitchView">元素上，但data-url属性实际是定义在它的子元素<a>标签里的！

当你点击链接时，事件会冒泡到父元素<li>触发处理函数，这时候$(this)指向的是<li>，而<li>并没有data-url属性，所以var url得到的是undefined。jQuery的load()方法在处理传入参数时，会尝试用indexOf判断是否包含选择器部分，对undefined调用indexOf就直接抛出了你看到的类型错误。

这里有两种简单的解决办法：

方法1：调整类的位置（更推荐） #

把btnSwitchView类从<li>移到<a>标签上，让事件绑定的元素和数据属性的位置匹配，逻辑更清晰：

<ul class="dropdown-menu">
    <li><a href="#" class="btnSwitchView" data-url="@Url.Action("Requirements", "Tasks")">Requirements</a></li>
    <li><a href="#" class="btnSwitchView" data-url="@Url.Action("Patterns", "Tasks")">Patterns</a></li>
    <li><a href="#" class="btnSwitchView" data-url="@Url.Action("Suppliers", "Tasks")">Suppliers</a></li>
</ul>

同时修改JS，加上阻止默认跳转的代码（避免页面跳转到#影响体验）：

$(document).ready(function () {
    $(".btnSwitchView").click(function (e) {
        e.preventDefault(); // 阻止<a>标签的默认跳转行为
        var url = $(this).data("url");
        $("#divViewContainer").load(url);
    });
});

方法2：不修改HTML，调整JS选择器 #

如果你不想改动现有HTML结构，可以在事件处理函数里主动找到<li>下的<a>元素来获取data-url：

$(document).ready(function () {
    $(".btnSwitchView").click(function (e) {
        e.preventDefault(); // 同样要阻止默认跳转
        var url = $(this).find("a").data("url");
        $("#divViewContainer").load(url);
    });
});

两种方法都能解决这个错误，按需选择即可。

内容的提问来源于stack exchange，提问作者user7566018