jQuery错误的事件处理程序

时间:2018-07-18 14:19:18

标签: javascript jquery

我有两个事件处理程序:

    $('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事件...

这是否可能是某些语法缺少引号/逗号/等。某处?

2 个答案:

答案 0 :(得分:0)

您可能会遇到此问题,因为您的<img class='saveField' ... ><div class='nav'>...</div>元素的后代。因此,每当您单击图像时,也将单击其下方的所有元素。

我建议您研究一下DOM结构,看看是否确实如此。如果您不希望图像成为nav类元素的后代,则可能只是在某个位置放置了一个未封闭标签,该标签将图像放置在该元素内。没有看到您的DOM结构,很难说。我怀疑您在代码中缺少.',因为这会导致您的应用程序无法运行,而不是运行不正常。< / em>

此外,我建议您使用$('.saveField').on('click', function(){ ... }代替$('body').on('click','.saveField',function(){ ... },如果仅仅是为了提高可读性。这样做的方式是,jQuery必须筛选元素以找出在单击事件时要触发的元素,而不是最初在这些元素中注册click事件。

答案 1 :(得分:0)

我猜你的html看起来像这样:

chrome.storage.sync.get("code", (data) => {code.innerHTML = data[0].code; console.log(data[0].code)})(document.head||document.documentElement).appendChild(script);

因此,当您单击img却将其触发时,

只需将此检查添加到您的代码中即可:

<div class='nav'>

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

...
</div>

此处有更多详细信息:jquery stop child triggering parent event