如何为动态添加到网站的按钮创建功能?香草Javascript



嗨,我正在创建这个图像上传功能,但我一直坚持为动态添加的动作按钮调用创建函数的逻辑。所以我有这个拖放上传的图像,当你把图像放在拖放区域时,它会自动显示图像的预览,预览图像下面有一个按钮,一个删除按钮

const previewImage = function(file) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {        
let div = document.createElement('div');
div.className = 'preview-image-result';
div.innerHTML = `
<img src="${reader.result}">
<div class="d-flex justify-content-center">
<span class="remove-image-button" onclick="removeImage()">Remove Image</span>
</div>
`;
}
document.getElementById('preview-image-container').prepend(div);
}

我试图在<span>中添加onclick=removeImage(),但它返回错误并说(index):1 Uncaught ReferenceError: removeImage is not defined。我认为由于<span>Remove Image</span>是动态添加到站点的,所以它没有检测到我创建的removeImage()方法。任何人都可以帮助我在这种工作流程中使用什么方法,或者我遗漏了什么?使用香草Javascript

const removeImage = function() {
// remove image
}

文档上的事件侦听器将执行以下操作:

document.addEventListener("click", function(event){
if(event.target.classList.contains("remove-image-button"){
event.target.closest(".preview-image-result").remove();
}
})

因此,如果对文档进行任何单击并且单击的元素具有remove-image-button类,则其preview-image-result父级将被删除。

向文档中添加事件侦听器并检查单击元素的特定条件也称为事件委派

我明白了,谢谢你在评论中指出这一点。removeImage()位于jQuery(document(.ready(function(({})我更改removeImage()jQuery(document(.ready(function(({}(并且它工作!
const removeImage = function() {
// remove image
}
jQuery(document).ready(function () {
const previewImage = function(file) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {        
let div = document.createElement('div');
div.className = 'preview-image-result';
div.innerHTML = `
<img src="${reader.result}">
<div class="d-flex justify-content-center">
<span class="remove-image-button" onclick="removeImage()">Remove Image</span>
</div>
`;
}
document.getElementById('preview-image-container').prepend(div);
}
})

我不知道OP代码的动态部分是否真的有效,所以在下面的例子中,img是动态添加的。事件处理程序CCD_ 11已经被绑定到祖先元素CCD_。通过事件委托,任何数量的按钮都可以控制,只要它在<section>中即可。事件处理程序的设计仅用于对.btn上的任何单击作出反应,而不用于其他任何操作。

const sec = document.querySelector('section');
const previewImage = () => {
let img = `
<figure class="d-flex justify-content-center">
<img src="https://i.ibb.co/hZj77BZ/lena01.jpg" width='150'><figcaption><button class="btn">Remove Image</button></figcaption></figure>
`;
sec.insertAdjacentHTML('afterBegin', img);
}
previewImage();
const removeImg = e => {
const btn = e.target;
if (btn.matches('.btn')) {
let imgFrame = btn.closest('figure');
imgFrame.remove();
}
};
sec.onclick = removeImg;
<section></section>

最新更新