js笔记 通过js 填充到jsp 的html内容，其中的点击事件 不生效 解决方法

因为业务上的需要，有时候我们的jsp页面中的 html 内容需要通过js 动态的进行填充，这样可能会碰到一种情况— 如果js 动态填充的内容 中含有我们的页面事件（如点击，切换等），这时候 我们在通过jquery 选择器 去绑定事件  可能会失效，达不到想要的结果。

填充的html片段如下：

var html_major = '';
var majorListSize = majorList.length;
for (var i = 0; i < majorListSize; i++) {
    var k = i + 1;
    html_major += '<div class="major_type item" data-id="major_' + k + '" title="' + majorList[i].name + '">' +
        '                            <i class="line"></i>' +
        '                            <span class="item-progress"><span class="item-progress-text" style="width: ' + majorList[i].nameRate + '%;">' + majorList[i].nameRate + '%</span></span> ' +
        majorList[i].nameShort +
        '</div>';
}

$('#dept-box').empty().html(html_major);

//通常的这种写法。点击无效 达不到想要的效果

$('.major_type').on('click', function () {});

 

可以通过以下两种方式来解决上述问题：

/**
 * .major_type 点击事件
 */
$('body').on('click', '.major_type', function () {
    var currentObj = $(this);
    var major = currentObj.attr('title');
    var dataId = currentObj.attr('data-id');
    var deptIndex_c = currentObj.index();

    ...
    ...
});


$(document).on("click", '.major_type', function () {
    ...
    ...
});