时间戳

首页 > 解决方案 > jquery错误的事件处理程序

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-10saveField按预期触发事件......

这可能是一些缺少引号/逗号/等的语法吗？某处？

标签： javascriptjquery

解决方案

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

我建议您查看 DOM 结构，看看是否确实如此。如果您不希望您的图像是nav该类元素的后代，您可能只是在某个地方有一个未封闭的标签，将您的图像放置在该元素中。没有看到你的 DOM 结构，很难说。我怀疑您的代码中缺少 a.或 a '，因为这会导致您的应用程序无法运行，而不是无法正常运行。

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

推荐阅读