javascript - $(this).attr ('id' );不工作

Question

祝大家有美好的一天，我正在构建一个页面，在最后一步之前一切都很顺利。

代码如下:

$(document) .ready(function(){
    var a;
    var b=0;
    var z="";
    var menu = [
        { name: "LOGO", items: [] },
        { name: "BANNERS", items: ["Banner", "Banner inside the Body"] },
        { name: "HEADERS", items: ["Header1", "Header2", "Header3", "Header4", "Header5"] },
        { name: "BODY TEXT", items: [] },
        { name: "LISTS", items: ["List1", "List2", "List3"] },
        { name: "TABLES", items: ["Table", "Table Text"] },
        { name: "GRAPHS", items: ["Graph1", "Graph2"] },
        { name: "HEADERS/FOOTERS SECTION", items: [] },
        { name: "SPECIAL SECTION", items: ["Special Section1", "Special Section2", "Special Section3", "Special Section4", "Special Section5"] },
    ];

    for (a=0; a<menu.length; a++){
        z+='<div class="menu-enclosure" id="butt-'+a+'"><button class="btn">'+menu[a].name+'</button>';
        while (b<menu[a].items.length) {
            z+='<button class="sub" id="subt-'+b+'">'+menu[a].items[b]+'</button>';
            b++;
        }
        b=0;
        z+="</div>";
    }

    $('.menu-holder') .append(z);

    $(document) .on('click', '.menu-enclosure', function(){
        var clicked =$(this).attr('id');
        var z = clicked.replace(/\D/g, '');
        var x =0;
        $('.content-holder') .html("");
        $('.content-holder') .append('<div class="title-bar"><span class="reg-wht">'+menu[z].name+'</span></div><BR><div class="photo-holder"><img alt="'+menu[z].name+'" src="'+menu[z].name+'"></div>');
        $('.sub') .hide();
        while (x<menu[z].items.length) { 

            $('#'+clicked+' #subt-'+x) .show();
            x++;
        }
        x=0;

        $(document) .on('click', '.sub', function(){
            var clicked =$(this).attr('id');

            $('.content-holder') .append(clicked);
        });
    });
});

另外，这是 JS Fiddle。

https://jsfiddle.net/453azpLr/embedded/result/

如果您访问过我的 fiddle ，您会发现除了最后一部分(第 50 行等)之外，一切正常。

正如您所看到的，当您单击菜单时，所单击的任何内容的文本都会反射(reflect)到内容持有者 div 中。但是当我点击子菜单时它不起作用。

我不知道主要问题是什么，也不知道我是否正确地看待它，但我尝试将第 51 行更改为各种内容，如下所示:

var clicked =$(this).children("button").attr('id');

var clicked =$(this).find("button").attr('id');

var clicked =$(this).children().attr('id');

我还尝试将选择器(.menu-enclosure)更改为按钮的分类和ID，但无济于事。

目前，我正在尝试确定单击是否会获得正确的 id，因此代码:

    $('.content-holder') .append(clicked);

请帮忙

Answer 1

如果您将第一位更改为:

，它应该可以工作:

$(document).on('click', '.menu-enclosure', function(e) {

  var clicked = e.target.id || this.id;

这将检索点击源自的实际元素而不是父元素。当更改为这个时，打开菜单时返回的元素将不再是包装器 div 本身，而是第一个子按钮。它没有 id，但有一个类，因此如果它为空，接下来它将查看父 div。

请注意，每当 <button class="btn"> 时，这将不再有效会得到它自己的id。如果这些按钮获得从 .menu-enclosure 传输的 id，您可以留下第二个检查。父级。

https://jsfiddle.net/37eyppnh/

顺便说一下，当 ids 来自 .menu-enclosure 时被转移到按钮，这也可以工作:

$(document).on('click', '.menu-enclosure button', function() {

  var clicked = this.id;