关于jQuery动态加载元素之后绑定事件无法触发的问题

之前做简单的demo的时候用jQuery直接拼出页面的元素,但是在使用ajax动态刷新之后会出现原来元素上的绑定事件无法触发.

在网上找了一圈之后,有人说document.on(),这个方法绑定到父级元素上,但是进过测试发现元素的点击事件的触发次数会出现1,3,5,7...此的增加,就是说第二次点击的时候实际上已经触发了3次.这肯定是不对的,因为在点击事件中,我还需要再次触发ajax去刷新其他地方,而且这样的操作,如果涉及到数据操作,肯定不对.

这个问题困扰了我好几天,后来,我无意中发现,在加载页面之后,我刷新一次,那么原来刷新的地方可以再次触发.

恍然大悟,看来是我把问题想得比较复杂,那么我就从最简单的地方入手就行了.直接在页面重新刷新时,再刷新一下页面不就行了嘛.

$.ajax(
    {
        url:"/Main/startAction?deployID=" + deID ,
        type:"post",
        async:true,
        dataType:"json",
        success:function () {
            $.ajax(
                {
                    url:"/Main/definitionList",
                    type:"post",
                    async:true,
                    dataType:"json",
                    success:function (data) {
                        alert("启动成功");
                        $("#actFileList").html("");
                        freshModelList(JSON.stringify(data));
                        window.location.reload();
                    }
                }
            );
        },
    }
);

freshModelList()这个方法是我用来刷新页面的,在ajax请求成功之后,我要刷新其他地方的元素,那么那边我先清空一次,然后重新加载,最后刷新一次页面,方法代码如下

function freshModelList(modelData){
    var modelList = JSON.parse(modelData);
    var tableStr = "";

    for (var i = 0; i < modelList.length; i++) {
        var mID = modelList[i].mID;
        tableStr +=
            '<tr>' +
            '<td ' + 'id=mName_' + mID + ' >' + modelList[i].mName + '</td>' +
            '<td ' + 'id=mStatus_' + mID + ' >' + '未部署' + '</td>' +
            '<td ' + 'id=mVersion_' + mID + '>' + modelList[i].mVersion + '</td>' +
            '<td ' + 'id=mKey_' + mID + ' >' + modelList[i].mKey + '</td>' +
            '<td>' +
            '<button ' + 'id=mDeploy_' + mID + ' type="button" class="btn btn-default" style="padding-left: 20px;padding-right: 20px;margin-left: 20px;margin-right: 20px;">' +
            '部署' +
            '</button>' +
            // '<button ' + 'id=mDelete_' + mID + ' type="button" class="btn btn-default" style="padding-left: 20px;padding-right: 20px;margin-left: 20px;margin-right: 20px;">' +
            // '删除' +
            // '</button>' +
            '<button ' + 'id=mView_' + mID + ' type="button" class="btn btn-default" style="padding-left: 20px;padding-right: 20px;margin-left: 20px;margin-right: 20px;">' +
            '查看' +
            '</button>' +
            '</td>' +
            '</tr>'
    }
    $("#actFileList").html(tableStr);
}

进过测试,完全可以解决上述问题.

由于时间仓促,暂时没有遇到bug,如果有遇到类似问题的小伙伴,可以留言一起讨论,谢谢.