动态 onclick 在 chrome 中不起作用

Question

我的 js 文件中有这段代码。当用户将鼠标悬停在最后一个 div 块上时，我添加了一个 + 和删除按钮，该按钮在 Firefox 中运行良好。但不是在 chrome 中。

$(document).on('mouseover', '.item-block-row', function(){
        if($(this).closest('#glaceblock').length || $(this).closest('#sorbetblock').length){
            $('.deleteSorbGlaceItem').remove();

            if($(this).is(':last-child')){
                var maximumCount = 10;
                if($('.layout-item-row').length >= maximumCount){
                    // Need to show only the delete icon for the last row
                    if($(this).closest('#sorbetblock').length){
                        $(this).append('<div class="col-md-1 col-sm-1 deleteSorbGlaceItem" ><div class="deleteIcon" onclick="deleteMultipleItem(' + projectId + ', this); "><img title="Supprimer" class="action_button image-button-dimensions" src="images/Picto_poubelle.png" alt="Supprimer" ></div></div>');
                    } 
                    return;
                }

                if($(this).closest('#sorbetblock').length){
                    $(this).append('<div class="col-md-1 col-sm-1 deleteSorbGlaceItem"><div class="addIcon" onclick="addItemBlock(' + projectId + ', \'editsorbet\', \'sorbet\');"><img title="Modifier le format" class="action_button image-button-dimensions" src="images/Picto_format.png" alt="format" ></div></div>');
                }

                if($(this).closest('#sorbetblock').length && $('#sorbetblock .sorbetitem').length <= 4){
                    // If row item is last and only 2 rows exists  adding only '+' button for adding an item .
                    // do nothing

                }   
                else {  
                     // If row item is last adding '+',' delete'  
                    if($(this).closest('#sorbetblock').length){
                        $(this).find('.deleteSorbGlaceItem').append('<div class="deleteIcon" onclick="deleteMultipleItem(' + projectId + ', this); "><img title="Supprimer" class="action_button image-button-dimensions" src="images/Picto_poubelle.png" alt="Supprimer" ></div>');    
                    } 
                }
            }
        }
    });

我了解动态元素的onclick 在 chrome 中不起作用，因此解决方案是使用来自jquery 的点击功能。所以我尝试了这个。

$(document).on('click', '.addIcon', function(){
    console.log('t');
});

这在 chrome 中根本不起作用，但在 Firefox 中很好。我一直在使用 jquery click 和 onclick 超过 2 年。我从来没有在chrome中遇到过这个问题。

他的代码有什么问题还是我错过了什么？

编辑：

我在尝试 jquery onclick 时删除了内联 onclick="addItemBlock(' + projectId + ', \'editglace\', \'glace\');"。

这里是Fiddle

Answer 1

请检查：https://jsfiddle.net/qubfcc7z/34/

问题是：函数 $(document).on('mouseover', '.item-block-row' 运行了很多时间

if(($(this).closest('#glaceblock').length || $(this).closest('#sorbetblock').length) && $(this).find('.deleteSorbGlaceItem').length ===0){

Answer 2

来自：https://api.jquery.com/mouseover/

当鼠标指针移动时，鼠标悬停事件被发送到一个元素 进入元素。

这意味着当鼠标悬停在元素上时代码会不间断地执行，因此快速创建和删除图像不会为click 事件留下空间，函数内部的简单console.log('here') 可以证明：

$(document).on('mouseover', '.item-block-row', function(){
    console.log('here');

这会消耗大量资源并降低您的网站速度，

因此将其替换为$(document).on('mouseenter', '.item-block-row', function(){ ... 将解决您的问题，因为代码只会在鼠标进入元素https://api.jquery.com/mouseenter/ 时执行一次