通过innerHTML动态添加的按钮点击无响应问题排查与解决

解决方案：输出div的z-index设为-1，导致按钮无法被点击。感谢评论区的j08691

问题描述 #

我用JavaScript创建了一批带onclick事件的按钮来执行指定功能。直接在页面中编写按钮代码时功能正常，但通过JS创建并用.innerHTML添加到文档后，按钮完全无法触发点击事件。

请问这种页面加载后通过该方式创建的按钮是否存在限制？是否需要手动添加事件监听器？

说明：项目未部署在服务器，所有逻辑需在客户端运行。

按钮代码示例：

<button class="tag" onclick="alert('Button Clicked!')">Text</button>

生成的HTML代码完全一致，将执行创建按钮函数后页面源码中的该元素复制到body中直接测试，功能正常。

补充可复现示例 #

CSS代码

body {
    width: 7in;
    margin-left:auto;
    margin-right:auto;
}

#patterns-output {
    position: relative;
    z-index: -1;
}

#search-bar {
    display: none;
    position: fixed;
    top: 0px;
    width: 7in;
    padding: 0.140in;
    margin-bottom: 0.125in;
    background: white;
    border-bottom: solid 1px black;
}

#loading-icon {
    margin: auto;
    display: none;
}

.pattern {
    width: 7in;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.125in;
    margin-bottom: 0.125in;
}

.info {
    width: inherit;
    border: 0px solid green;
}

.pattern-image {
    width: 3in;
    float: right;
    border: 0px solid blue;
}

.thread-image-container {
    width: 20px;
    height: 20px;
    position: relative;
    left: -5px;
    top: 3px;
    float: left;
    overflow: hidden;
    border: 0px solid blue;
}

.thread-image {
    position: relative;
    left: -600px;
    top: -619px;
}

.tag {
    float: left;    
    margin-bottom: 5px;
    margin-right: 5px;
}

.thread-changes {
    width: inherit;
    clear: both;
    border: 0px solid yellow;
}

.cols {
    /* 7in wide - (0.3" padding x2) = 6.4" - 0.4 gap = 6" / 2 = 3" col */
    column-count: 2;
    column-gap: 0.4in;
    column-width: 3in;
    border: 0px solid purple;
}

ul, ol {
    padding-left: 0.3in;
}

HTML代码

<html lang="en">

    <head>
        <title>Embroidery Database</title>
    </head>

    <body>
        
        <div id="search-bar" style="display: inline;">
            
            <button class="tag" onclick="alert('Button Clicked')">Test</button>
            
        </div>
        
        <div id="patterns-output" style="top: 59px;">
            <div class="pattern" id="M18731">
                <img class="pattern-image" src="patterns/M18731.jpg">
                <b>A Little Dirt Never Hurt</b> (M18731)<br>
                5.5in wide x 4.85in high (17353 stitches)
                <ul><b>Thread List</b> (4)
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1048.jpg"></div>Celery (#1048)</li>
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1184.jpg"></div>Scarlet Rose (#1184)</li>
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1058.jpg"></div>Sienna (#1058)</li>
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1065.jpg"></div>Copper (#1065)</li>
                </ul>
                <button class="tag" onclick="alert('Button Clicked')">Text</button>
                <button class="tag" onclick="alert('Button Clicked')">Plants</button>
                <br>
                <div class="thread-changes">
                    <ol><b>Thread Changes</b> (4)
                        <div class="cols">
                            <li>Celery: Vegetable Tops, Text</li>
                            <li>Scarlet Rose: Radish, Beet, Text</li>
                            <li>Sienna: Text</li>
                            <li>Copper: Carrot</li>
                        </div>
                    </ol>
                </div>
            </div>
        </div>
    </body>

</html>

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