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

问题

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 + " &nbsp;&nbsp;&nbsp;&nbsp;"
                    + "<a href='../util/news?opr=toModifyNews&nid=' + 'data[i].nid'>修改</a> &nbsp;&nbsp;&nbsp;&nbsp;"
                    + "<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> &#160;&#160;&#160;&#160; "+data[i].tname+" &#160;&#160;&#160;&#160; "
                    + "<a href='../newspages/topic_modify.jsp?tid="+ data[i].tid + "&" + data[i].tname + "'>修改</a> "
                    + "&#160;&#160;&#160;&#160; <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&amp;tid=" + tid;
    }
}

// 删除新闻
function clickdelNew(nid) {
    if (confirm("此新闻的相关评论也将删除,确定删除吗?")) {
        window.location = "../util/news?opr=delete&amp;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函数]}里触发,而不能直接调用相关函数,避免引起未知原因

猜你喜欢

转载自blog.csdn.net/weixin_41016986/article/details/81365884
今日推荐