Question

当用户选择照片时，我在普通javascript中将div添加到父div。我还添加了两个点击事件来打开预览和删除照片。添加第一张照片时，两个事件都可以正常工作，但是当我添加另一张照片时，最新的照片会有点击事件，但之前的div没有。

为什么会发生这种情况，更重要的是，我该如何预防？

有问题的代码如下。

＆＃13;

function addImageToView(imageURI){
                var imageDiv = document.getElementById('imageMaster');
                imageDiv.innerHTML += '<div style="padding-bottom: 10px;"><div style="float: left;" class="thumbnail" id= img_'+ imageCounter +'><img id= img_'+ imageCounter +' src="' + imageURI + '"></div><div id= img_'+ imageCounter +'_delete>delete</div><div style="width:67%; padding-top: 30px; padding-left: 10px;" class="thumbnail"><label class="item item-input" id="article-input8"><input type="text" placeholder="Photo Caption" ng-model="data.report_title"></label></div></div>';
                document.getElementById('img_'+ $scope.imageCounter).addEventListener("click", function(){showMe(imageURI)});
                document.getElementById('img_'+ $scope.imageCounter + '_delete').addEventListener("click", function(){removePhoto(this, imageURI)});
            }

＆＃13;

Answer 1

就像上面评论中指出的@Teemu一样，innerHTML方法完全取代了元素，只剩下我之后的听众。使用insertAdjacentHTML方法解决了它。

单击动态添加新Div时丢弃的事件侦听器

1 个答案: