使用jQuery访问HTML内部的元素

Question

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

JSON文件（ “cwdata.json”）：

{ 
    "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 

在菜单的第一项（“首页“），当我点击它时会起作用。但是，当我点击它时，“家”下的任何项目都没有任何反应或反馈。

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

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

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

如果我点击“首页”，它返回："Value: HTMLSpanElement"。但是当我点击“国家名称向此处”时，没有任何反应。我不能让这对小提琴要么工作，但这里是我能提供什么：

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)

UPDATE：为了能够使用有效的外部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" 
        }] 
      }] 
    }] 
}); 

也更新为使用JSON从该URL的属性在锚元素应用rotine

$(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

由于您的列表是动态生成的，你需要在（）的使用，请点击（）只适用于项目已经喜欢你的“主页”链接在页面上：

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