Question

我试图捕获当用户点击允许他离开页面的元素时被点击的元素的ID。我们的想法是使用Ajax记录它。只要元素具有ID，下面的脚本似乎工作正常，但是如果它没有，它似乎无法爬上DOM来查找祖先的ID。我做错了什么？

$(document).ready(function(){
    $('a, button, input[type=submit]').on('click', function (event) {
        if (event.target.id == '')
            alert($(this).closest('[id!=""]').attr('id'));

        else
            alert(event.target.id);
    });
});

Answer 1

我相信这会递归地找到 ID

$(document).on('click', 'a, button, [type="submit"]', function() {

    findID($(this));

});

function findID(element) {
    if(element.attr('id') === undefined || element.attr('id') === null) {
        var temp = element.parent().attr('id');
        if(temp === undefined || temp === null){
            findID(element.parent());
        } else {
           alert(temp);
        }
    } else {
         alert(element.attr('id')); 
    }
}

DEMO

Answer 2

如果未定义父级的id或者元素嵌套太多以至于无法计算它拥有多少个父级，即获得实际具有id的最接近的父级id，那么此代码将为您完成工作： DEMO

$(document).on('click', 'a, button, [type="submit"]', function() {

    if($(this).attr('id') === undefined || $(this).attr('id') === null) {
        alert($(this).parents().filter(function(){
            return $(this).attr('id')!=undefined && $(this).attr('id')!=null;
        }).attr('id'));
    } else {
         alert($(this).attr('id')); 
    }

});

Answer 3

这是一种通过DOM递归查找ID attribut的方法：

    $(document).ready(function () {
        $('a, button, input[type=submit]').on('click', function (event) {               
            getID($(this));
        });

        function getID(element) {
            if (element.attr('id') && element.attr('id') !== "") {
                alert(element.attr('id'));
            } else if (element.parent()) {
                getID(element.parent());
            }
        }
    });

Answer 4

您的代码存在的问题是，您只需检查所点击元素的ID属性是否为空，但您不会检查它是否实际存在。此外，[id!=""]选择器似乎无法正常工作，但我发现在强制元素具有id之前添加[id]使其工作，因此更简洁的解决方案是：

$(document).ready(function(){
    $('a, button, input[type=submit]').on('click', function () {
        var id = this.id ? this.id : $(this).closest('[id][id!=""]').attr('id');
        alert(id);
    });
});

<强> Demo fiddle

jQuery捕获被点击元素的ID

4 个答案: