Javascript Unordered список OnClick

Question

У меня есть неупорядоченный список в HTML, к которым у меня есть добавление элементов списка Использование JavaScript

$(document).ready(function() { 
    $.ajax({ 
     url: "/Home/GetSchools", 
     type: 'get', 
     dataType: "json", 
     async: false, 
     success: function (data) { 
      $.each(data.Items, function (index, value) { 
       console.log("the schoolname is" + value.schoolName); 
       $('ul#dropdown-items').append(' <li role="presentation"><a id="value.schoolId" role="menuitem" tabindex="-1" href="#" onclick="setschool(this.id);return false;">value.schoolName</a></li>'); 
       $('ul#dropdown-items').append('<li role="presentation" class="divider"></li>'); 
      }); 
     } 
    }); 
}); 

Я не мог получить value.schoolName и OnClick = "setschool (this.id); работает ..

Answer 1

Проверить это fiddle

$(document).ready(function() { 
    i=0; 
    value=["Hello","hi","hey"]; 
    $.each(value,function(){ 
     $('#dropdown-items').append("<li > <a style='cursor:pointer' id='"+value[i]+"'>"+value[i]+"</a></li><br/>"); 
     i++; 
    }); 

    $("a").on("click",function(){ 
    alert(this.id); 
    }); 
    }); 

Answer 2

это потому, что вы жестко прописывать значение в виде строки, а не переменной Когда вы проверяете страницу, так это распечатать идентификаторами правильно

Примечание:.? одна вещь, которую вы хотите сохранить в ум - NOT используйте номер для п идентификатор элемента, вместо этого он написал так: <a id="school_101">Graystone High</a>

Это, как вы можете достичь всего:

$(document).ready(function() { 
      $.ajax({ 
        url: "/Home/GetSchools", 
        type: 'get', 
        dataType: "json", 
        async: false, 
        success: function (data) { 
         $.each(data.Items, function (index, value) { 
          console.log("the schoolname is" + value.schoolName); 
          $('ul#dropdown-items').append(' <li role="presentation"><a id="school_'+value.schoolId+'" role="menuitem" tabindex="-1" href="#" onclick="setschool(this.id);return false;">'+value.schoolName+'</a></li>'); 
         }); 
        } 
       }); 
      }); 

Кроме того, я заметил, что вы добавили Append 2 пунктов: один содержит данные, в то время как другие акты как разделитель. Вы используете один <li> и проверяете, является ли этот элемент последним из набора данных. Если это не последний, вы можете дать ему стиль border-bottom: 1px dashed #CCC.