Question

我试图访问手风琴菜单中的元素。我用我的手风琴菜单填充了使用jQuery加载的JSON数据。我可以看到页面加载时正在创建完整菜单。问题是我无法访问菜单中的第二级。

JSON文件（＆＃34; cwdata.json＆＃34;）：

{
    "Country": [{
            "CountryName": "COUNTRY NAME GOES HERE",
            "Region": [{
                    "RegionName": "REGION NAME GOES HERE",
                    "SubRegion": [{
                            "SubRegionName": "SUBREGION NAME GOES HERE"
                        }]
                }]
        }]
}

jQuery用于从JSON文件填充手风琴菜单：

$.getJSON('../JSON/cwdata.json', function (cwData) {
        $.each(cwData.Country, function (i, country) { // loop through all the countries
            var countries = '<li class="country_name"><a href="#">' + country.CountryName + '</a></li>'; // the name of the country
            var country_region = '<ul class="country_region">'; // create a list of all the regions in the country
            var region_subregion = "";

            $.each(country.Region, function (i, region) { // loop through all the regions
                country_region += '<li class="region_name"><a href="#">' + region.RegionName + '</a></li>'; // the name of the region
                region_subregion = '<ul class="region_subregion">'; // create a list of all the subregions in the region

                $.each(region.SubRegion, function (i, subregion) { // loop through all the regions
                    region_subregion += '<li class="subregion_name"><a href="#">' + subregion.SubRegionName + '</a></li>'; // the name of the subregion
                });
                region_subregion += '</u>'; //close the list tags
            });
            country_region += '</ul>'; //close the list tags
            $(countries).appendTo('#Country').append(country_region); // append the region to the country and append the country to the accorion menu
            $(region_subregion).appendTo("li.region_name"); // append the subregion to the region
        });
    }); // getJSON

单击菜单时，菜单中的第一项（＆＃34; Home＆＃34;）有效。但是＆＃34; Home＆＃34;点击它时没有任何反应或反馈。

这是加载页面后的HTML菜单：

enter image description here

我可以使用此代码检查点击它时元素是什么：

$("a").click(function (event) {
    alert("Value: " + event.target);
});

如果我点击＆＃34; Home＆＃34;，则会返回："Value: HTMLSpanElement"。但当我点击＆＃34;国家名称来到这里＆＃34;时，没有任何反应。我无法让这个在小提琴上工作，但这是我能提供的：

http://fiddle.jshell.net/3d6Nz/2/

Answer 1

你的小提琴根本不起作用。我认为你得到一个jQuery错误：Uncaught ReferenceError: $ is not defined

确保在脚本之前调用jQuery引用。

Answer 2

这是因为，你可能在getJSON完成之前调用click事件函数。使用以下结构;

var $result = $.getJSON('../JSON/cwdata.json', function(cwData){
    ......
});

$result.done(function(){
    $("a").click(function (event) {
      alert("Value: " + event.target);
    });
});

有关.done的更多详细信息，请参阅here并搜索标题 jqXHR对象

Answer 3

将代码更改为遍历本地json数据并测试点击确实有效。

使您的功能仅在页面加载文档时运行

跟随FIDDLE：CLICK HERE (Updated)

更新：为了能够使用有效的外部URL JSON文件，我必须将数据从JSON更改为JSONP方法，并将数据文件更改为：

Populate({
    "Country": [{
        "CountryName": "COUNTRY NAME GOES HERE",
        "Url" : "http://country",
        "Region": [{
                "RegionName": "REGION NAME GOES HERE",
                "Url" : "http://region",
                "SubRegion": [{
                        "SubRegionName": "SUBREGION NAME GOES HERE",
                        "Url" : "http://subregion"
                    }]
            }]
    }]
});

还更新了rotine以使用JSON中的URL属性来应用锚元素

$(document).ready(function() {

    $.ajax({ url:'http://rkti.com/stack/data.js', dataType: 'jsonp'});

});

将主逻辑放在一个名为Populate的函数中，由JSONP onsuccess-load调用。

function Populate(cwData) {

    $.each(cwData.Country, function (i, country) {
        var countries = '<li class="country_name"><a href="' + country.Url + '">' + country.CountryName + '</a></li>';
        var country_region = '<ul class="country_region">';
        var region_subregion = "";

        $.each(country.Region, function (i, region) {
            country_region += '<li class="region_name"><a href="' + region.Url + '">' + region.RegionName + '</a></li>';
            region_subregion = '<ul class="region_subregion">';

            $.each(region.SubRegion, function (i, subregion) {
                region_subregion += '<li class="subregion_name"><a href="' + subregion.Url + '">' + subregion.SubRegionName + '</a></li>';
            });
            region_subregion += '</u>';
        });
        country_region += '</ul>';
        $(countries).appendTo('#Country').append(country_region);
        $(region_subregion).appendTo("li.region_name");
    });

    $('a').on('click',function(e){
        alert($(this).text());
        e.preventDefault(); //Avoids default behavior of A# (going to top/change page)
        e.stopPropagation(); //Avoits any recursive click
    });   
}

Answer 4

这通常是由未绑定的事件处理程序引起的。如前所述，您可以在将节点插入DOM树之后附加事件处理程序。但这可能会导致创建许多事件处理函数。为了防止这种情况，您可以使用事件委派：

$("#options").on('click', 'a', function (event) {
    $el = $(this);
    alert($el.text());  
    event.preventDefault();
    event.stopPropagation();       
});

这会提醒所有链接文本。

是的，你的jsFiddle坏了，你忘了启用jQuery支持。

Answer 5

由于您的列表是动态生成的，您需要使用on（），click（）仅适用于页面上已有的项目，如“Home”链接：

$("a").on("click", function (e) {
    e.preventDefault(); //Prevent default browser behavior
    alert("Value: " + $(this).text()); //Wrap "this" with jQuery to access the clicked element
});

使用jQuery访问HTML中的元素

5 个答案: