jquery错误的事件处理程序

Question

我有两个事件处理程序：

    $('body').on('click','.saveField',function(){
                    var id = $(this).attr('id');
                    alert($(this).attr('class'));
                    id = id.split("_");
                    id = id[0];
                    $('#'+id).trigger('click');
    });

    $('body').on('click','.nav',function(){
            var id = $(this).attr('id');
            alert('I triggered');
            $.ajax({
                    type:"POST",
                    data:"id="+id,
                    url:"getServiceData.php",
                    success:function(result){
                            $('#pageBody').html(result);
                    }

            });
    });

更深入的页面，我有：

<img src='../images/saveIcon.png' width='25px' id='".$id."_save_".$field."' class='saveField'>

单击上图将触发.nav事件处理程序。我的问题是，我应该从哪里找出原因？

这是我所知道的：

1)第一个给出的类只有saveField

2)我已经在页面中查找了某个地方缺少的引语，我认为这是原因，但我不确定。

3)奇怪的是。img src是众多资源中的一个。只有第一个实例会触发.nav类事件。img src的2-10会像预期的那样触发saveField事件...

这可能是某些语法在某处遗漏了引号/逗号/等？

Answer 1

您可能会遇到这个问题，因为您的<img class='saveField' ... >是<div class='nav'>...</div>元素的后代。因此，当你点击你的图像时，你同时也在点击它下面的所有元素。

我建议您研究一下DOM结构，看看情况是否确实如此。如果您不希望您的图像是带有nav类的元素的后代，那么您可能只是在某个地方有一个未闭合的标记，用于将您的图像放置在此元素中。如果看不到DOM结构，就很难说。我怀疑您的代码中是否缺少.或'，因为这将导致您的应用程序无法正常工作，而不是不能正常工作。

此外，如果只是为了可读性，我建议使用$('.saveField').on('click', function(){ ... }代替$('body').on('click','.saveField',function(){ ... }。按照这种方式，jQuery必须过滤元素，找出在点击事件发生时触发哪些元素，而不是一开始就用这些元素注册点击事件。

Answer 2

我猜你的html应该是这样的：

<div class='nav'>

...
<img ... class='saveField' />

...
</div>

因此，当您单击img，但将其设置为父对象时会触发

只需将此检查添加到您的代码：

if(e.target !== e.currentTarget) return;

更多详细信息请访问：jquery stop child triggering parent event