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 () {
    ...
    ...
});