CKEditor中addEventListener绑定无效问题：无控制台报错

你的图片点击事件绑定无效，核心原因是动态更新innerHTML时销毁了原有元素：

在showImages函数中，你先把图片插入container并绑定点击事件，随后执行了document.getElementById("container").innerHTML += pagination;——这行代码会重新渲染container内的所有内容，之前创建的图片元素会被完全替换，导致已绑定的点击事件丢失，控制台自然不会报错（因为原元素已不存在）。

修复方案1：一次性构建完整内容（推荐） #

先把图片和分页的HTML拼接完成，再一次性赋值给container的innerHTML，避免元素被重复创建：

修改showImages函数中的相关代码：

function showImages(data) {
    if (parseInt(data.totalHits) > 0) {
        totalHits = parseInt(data.totalHits);
        totalPages = Math.ceil(totalHits / perPage);
        var images = "";

        $.each(data.hits, function (i, hit) {
            images += "<img class='upload_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
        });

        // 先拼接图片+分页的完整HTML
        var containerHTML = "<div id='container'>" + images;
        
        var pagination = "<div id='pagination'>";
        pagination += "<button id='prevBtn'>Prev</button>";
        pagination += "<button id='nextBtn1'>Next</button>";
        pagination += "</div>";
        containerHTML += pagination + "</div>";

        // 一次性写入DOM
        document.getElementById("upload_image_p").innerHTML = containerHTML;
        
        // 绑定图片点击事件
        var imgs = document.getElementsByClassName('upload_image');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].addEventListener('click', imageSelect);
        }

        // 绑定分页按钮事件
        var prevBtn = document.getElementById('prevBtn');
        var nextBtn1 = document.getElementById('nextBtn1');

        prevBtn.addEventListener('click', function () {
            currentPage--;
            getImages(currentPage);                                    
            nextBtn1.disabled = false;
        });

        if (currentPage === 1) {
            prevBtn.disabled = true;
        }

        nextBtn1.addEventListener('click', function () {
            currentPage++;
            getImages(currentPage);
            prevBtn.disabled = false;
        });
        
        if (currentPage === totalPages) {
            nextBtn1.disabled = true;                                      
        }

    } else {
        document.getElementById("upload_image_p").innerHTML = "<div id='container'>No hits</div>";
    }
}

修复方案2：事件委托（更灵活） #

如果后续有频繁的DOM更新，推荐用事件委托，把点击事件绑定到父元素上，不管子元素怎么动态生成，都能触发事件：

在CKEditor的dialogDefinition回调外（或合适时机）绑定一次事件：

// 事件委托：给父元素绑定点击事件，监听子元素点击
document.getElementById('upload_image_p').addEventListener('click', function(evt) {
    if (evt.target.classList.contains('upload_image')) {
        imageSelect(evt);
    }
});

然后去掉showImages中给单个图片绑定事件的循环代码，这样无论图片怎么重新渲染，点击事件都会生效。

额外优化建议 #

• 缓存upload_image_p的DOM引用，减少重复查询DOM的次数
• 分页按钮的禁用状态应该在每次getImages请求完成后重新判断，确保切换页码后状态正确

内容的提问来源于stack exchange，提问作者abu abu