JavaScript无法选中特定按钮绑定点击事件问题求助

开发网站时遇到问题：btn1EventClick和btn2EventClick按钮明明存在，但无法绑定点击事件，其他按钮则正常工作。相关代码如下：

HTML代码 #

<div id="products">
    <div class="product-1">
        <div class="fourchette">
            <h2>Fourchette enrouleuse de spaghetti</h2>
            <img src="fourchette.png" alt="">
        </div>
        <div class="btn1"><button></button>
        </div>
    </div>
    <div class="product-2">
        <div class="btn2"><button></button></div>
        <div class="cuillere">
            <h2>Cuillère mélangeuse de yahourt</h2>
            <img src="cuillere.png" alt="">
        </div>
    </div>
</div>

<div class="default-html-p1">
    <div class="fourchette">
        <h2>Fourchette enrouleuse de spaghetti</h2>
        <img src="fourchette.png" alt="">
    </div>
    <div class="btn1"><button></button>
    </div>
</div>

<div class="default-html-p2">
    <div class="btn2"><button></button></div>
        <div class="cuillere">
            <h2>Cuillère mélangeuse de yahourt</h2>
            <img src="cuillere.png" alt="">
        </div>
</div>

<div class="click-event-btn1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="btn2"><button></button></div>
</div>

<div class="click-event-btn2">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="btn1"><button></button></div>
</div>

JavaScript代码 #

let btn1 = document.querySelector('.product-1 .btn1');
let btn2 = document.querySelector('.product-2 .btn2');
let fourchette = document.querySelector('#products .product-1 img[src="fourchette.png"]')
let cuillere = document.querySelector('#products .product-2 img[src="cuillere.png"]')
let products = document.getElementById('products');
let product1 = document.querySelector('#products .product-1');
let product2 = document.querySelector('#products .product-2');
let clickEventbtn1 = document.querySelector('.click-event-btn1');
let clickEventbtn2 = document.querySelector('.click-event-btn2');
let btn1EventClick = document.querySelector('.click-event-btn2 .btn1 button');
let btn2EventClick = document.querySelector('.click-event-btn1 .btn2 button');
let defaultHtmlProduct1 = document.querySelector('.default-html-p1')

btn1.addEventListener('click', () => {
        product2.innerHTML = clickEventbtn1.innerHTML;
        document.querySelector('.btn2 button').style.position = "absolute";
        document.querySelector('.btn2 button').style.right = "110px";
        document.querySelector('.btn2 button').style.bottom = "5vh";
        btn1.style.display = "none";
        fourchette.style.animation = "rotateanim 1.5s linear";
        products.style.columnGap = "0";
})

btn2.addEventListener('click', () => {
        product1.innerHTML = clickEventbtn2.innerHTML;
        document.querySelector('.btn1 button').style.position = "absolute";
        document.querySelector('.btn1 button').style.left = "110px";
        document.querySelector('.btn1 button'). style.bottom = "5vh";
        btn2.style.display = "none";
        cuillere.style.animation = "rotateanim 1.5s linear forwards";
        products.style.columnGap = "0";
})

btn1EventClick.addEventListener('click', () => {
    product1.innerHTML = defaultHtmlProduct1.innerHTML;
})

核心问题分析 #

1. 动态DOM替换导致事件绑定失效
   点击btn2时，执行product1.innerHTML = clickEventbtn2.innerHTML会完全替换product1内的DOM结构。你最初选中的btn1EventClick是页面加载时存在于.click-event-btn2中的按钮，替换后product1里的新按钮是全新DOM元素，未绑定任何事件，原点击事件自然无法触发。

2. btn2EventClick未绑定事件
   代码中仅为btn1EventClick添加了事件监听，btn2EventClick没有对应的绑定逻辑，无法响应点击。

3. 选择器精度不足
   替换DOM后，document.querySelector('.btn2 button')会匹配页面中所有.btn2下的按钮，可能误操作无关元素，导致样式或逻辑混乱。

解决方案 #

使用事件委托处理动态生成元素的事件绑定，这是更可靠的方案，无需每次替换DOM后重新绑定：

// 补充遗漏的变量
let defaultHtmlProduct2 = document.querySelector('.default-html-p2');

// 事件委托处理btn1相关点击（覆盖初始和动态生成的按钮）
document.addEventListener('click', (e) => {
    if (e.target.closest('#products .product-1 .btn1 button')) {
        product1.innerHTML = defaultHtmlProduct1.innerHTML;
        // 恢复初始样式
        btn1.style.display = "block";
        products.style.columnGap = "";
        fourchette.style.animation = "";
    }
});

// 事件委托处理btn2相关点击
document.addEventListener('click', (e) => {
    if (e.target.closest('#products .product-2 .btn2 button')) {
        product2.innerHTML = defaultHtmlProduct2.innerHTML;
        // 恢复初始样式
        btn2.style.display = "block";
        products.style.columnGap = "";
        cuillere.style.animation = "";
    }
});

// 优化原有btn1、btn2的点击逻辑，提升选择器精度
btn1.addEventListener('click', () => {
    product2.innerHTML = clickEventbtn1.innerHTML;
    const targetBtn = product2.querySelector('.btn2 button');
    targetBtn.style.position = "absolute";
    targetBtn.style.right = "110px";
    targetBtn.style.bottom = "5vh";
    btn1.style.display = "none";
    fourchette.style.animation = "rotateanim 1.5s linear";
    products.style.columnGap = "0";
});

btn2.addEventListener('click', () => {
    product1.innerHTML = clickEventbtn2.innerHTML;
    const targetBtn = product1.querySelector('.btn1 button');
    targetBtn.style.position = "absolute";
    targetBtn.style.left = "110px";
    targetBtn.style.bottom = "5vh";
    btn2.style.display = "none";
    cuillere.style.animation = "rotateanim 1.5s linear forwards";
    products.style.columnGap = "0";
});

关键优化点 #

• 事件委托将事件绑定到静态的document上，通过e.target.closest()判断点击元素，不管元素是初始存在还是动态生成，都能触发事件。
• 使用product1.querySelector()/product2.querySelector()精确选择目标按钮，避免影响其他元素。
• 添加样式恢复逻辑，确保重置按钮点击后页面回到初始状态。

内容的提问来源于stack exchange，提问作者Jérémie Lagache