关于jQuery ajax无法触发点击事件的问题

超、凢脫俗 2022-05-18 10:56 243阅读 0赞

## 问题 ##

jQuery ajax无法触发点击事件

$(document).ready(function () { 
    
    
    
        var $leftLinks = $("#opt_list a")
        // 点击事件不起作用
        /*$leftLinks.eq(1).click(initNews()); $leftLinks.eq(3).click(initTopics());*/
        // 只有这样才可以
        $leftLinks.eq(1).on("click",function () { 
            initNews();
        });
        $leftLinks.eq(3).on("click",function () { 
            initTopics();
        });
    })
    
    // 初始化新闻列表
    function initNews(){ 
        $.ajax({
            "url"       : "../util/news",
            "type"      : "GET",
            "data"      : "opr=list",
            "dataType"  : "json",
            "success"   : function (data) { 
                var $newsList = $("#opt_area>ul").empty();
                for (var i = 0; i < data.length;){
                    $newsList.append("<li>" + data[i].ntitle + "<span> 作者："
                        + data[i].nauther + "     "
                        + "<a href='../util/news?opr=toModifyNews&nid=' + 'data[i].nid'>修改</a>     "
                        + "<a href='javascript:;' onclick='return clickdelNew()'>删除</a> "
                        + "</span></li>")
                    if ((++i) % 5 == 0){
                        $newsList.append("<li class='space'></li>");
                    }
                }
            },
            "error"     : function () { 
                alert("请求失败")
            }
        })
    }
    
    function initTopics() { 
        $.ajax({
            "url"       : "../util/topics",
            "type"      : "post",
            "data"      : "opr=list",
            "dataType"  : "json",
            "success"   : function (data) { 
                var $newsList = $("#opt_area>ul").empty();
                for (var i = 0; i < data.length;){
                    $newsList.append("<li>      "+data[i].tname+"      "
                        + "<a href='../newspages/topic_modify.jsp?tid="+ data[i].tid + "&" + data[i].tname + "'>修改</a> "
                        + "     <a href='../util/topics?opr=del&tid="+data[i].tid+"'>删除</a> </li>")
                    if ((++i) % 5 == 0){
                        $newsList.append("<li class='space'></li>");
                    }
                }
            }
        })
    }
    
    // 删除话题
    function clickdelTopic(tid) { 
        if (confirm("此新闻的相关评论也将删除，确定删除吗？")) {
            window.location = "../util/topics?opr=del&tid=" + tid;
        }
    }
    
    // 删除新闻
    function clickdelNew(nid) { 
        if (confirm("此新闻的相关评论也将删除，确定删除吗？")) {
            window.location = "../util/news?opr=delete&nid=" + nid;
        }
    }

当写成

$leftLinks.eq(1).click(initNews());
        $leftLinks.eq(3).click(initTopics());

## 分析 ##

点击时候表面无反应，查看页面请求，发现在加载页面时候两个ajax都被加载触发，但是触发两个ajax函数是绑定在click点击事件的，却都触发了。最终将两个函数封装在function（）\{\}；里发现起作用了。如下：

$leftLinks.eq(1).click(function(){
            initNews();
        });
        $leftLinks.eq(3).click(function(){
            initTopics();
        });

## 总结 ##

对于触发ajax可以写在类似on，click等事件的function（）\{\[ajax函数\]\}里触发,而不能直接调用相关函数，避免引起未知原因