jQuery捕获被点击元素的ID

I am trying to capture the ID of the element being clicked when a user clicks on an element which allows him to leave a page. The idea is to then record this using Ajax. The script below seems to be working fine as long as the element has an ID, but it does not seem to be able to climb the DOM to find an ancestor's ID if it has not. What am I doing wrong?

我试图捕获当用户点击允许他离开页面的元素时被点击的元素的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);
    });
});

4 个解决方案

#1

if the parent's id is not defined or the element is nested so much that you can't count how many parents it has, i.e. get the closest parent's id that actually has an id, then this code will do the job for you: DEMO

如果未定义父级的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')); 
    }

});

#2

I believe this would recursively find the IDs

我相信这会递归地找到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

#3

Here a way to look recursively through the DOM for an ID attribut:

这里有一种通过DOM递归查找ID属性的方法：

    $(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());
            }
        }
    });

#4

The issues with your code is that you're only checking if the id attribute of the clicked element is empty but you're not checking if it's actually present. Also it seems that the [id!=""] selector is not working correctly but I found that adding [id] before to force the element to have an id makes it work, so the more concise solution would be this:

您的代码存在的问题是，您只是检查被点击元素的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

演示小提琴

#1