Question

我在js文件中有这段代码。当用户将鼠标悬停在最后一个div块上时，我正在添加一个+和删除按钮，这在Firefox中工作正常。但不是铬。

$(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'运行了很长时间

localhost:8183

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/

动态onclick在chrome中不起作用

2 个答案: