0

私のメニューには、次のアイテムがあります。

<ul>
    <li class="menu_item" data-content_id="#landscape_context">Landscape Context</li>
    <li class="menu_item" data-content_id="#terrestrial_features">Terrestrial Features</li>
    <li class="menu_item" data-content_id="#aquatic_features">Aquatic Features</li>
    <li class="menu_item" data-content_id="#vegetaion_land_use">Vegetation/Land Use</li>
    <li class="menu_item" data-content_id="#additional_features">Additional Features</li>
    <li class="menu_item" data-content_id="#data_descriptions">Data Descriptions</li>
    <li class="menu_item" data-content_id="#faq">FAQ</li>
</ul>

次に、ユーザーがアイテムの1つをクリックすると、そのコンテンツを表示したいと思いdata-content_idます。ただし、クリックしても何も起こりません。

これがjavascriptです：

$(".menu_item").click(function () {
    alert("Hello");
});

コードを、メニュー項目をクリックしても表示されない単純なアラートに置き換えました。

私はここSOで見つかった他の多くの例を見てきましたが、私のソリューションについて何も違うものを見つけることができませんでした。

誰かが私がここで間違っているかもしれないことを見ますか？

ありがとう

4

3 に答える 3

2 
$(document).ready(function(){
   $(".menu_item").click(function () {
       alert(  $(this).attr("data-content_id") );
   }); 
});
于 2013-01-08T16:28:47.490 に答える
0

要素はスクリプトの後にDOMに読み込まれるか、非同期で読み込まれます。前者の場合は、すべてをラップするだけです$(document).ready(function () {...（または$(function () {...

後者の場合は、次のようなイベント委任を使用します。

$(document).on('click', '.menu_item', function () {
于 2013-01-08T16:29:13.963 に答える
0

このコードを試してください：

$(document).ready(function() {
   $(".menu_item").click(function () {
       alert($(this).attr("data-content_id"));
   }); 
});
于 2013-01-08T16:31:33.787 に答える