страница загрузки в DIV с помощью JQuery

Question

Этот код JQuery загружает конкретную страницу в DIV (это работает):

<script type="text/javascript"> 
     $(document).ready(function() { 

      $("#button2").on("click", function(){ 
       $("#loader").load($("#button2").attr("page")); 
       return false; 
      }); 
     }); 
    </script> 

Кроме того, у меня есть 2 ссылки с «страницы» атрибут, указывающий файл HTML, который будет загружен в DIV:

<li><a href="#" title="" id="button2" page="page1.html">Link 1</a></li> 
<li><a href="#" title="" id="button2" page="page2.html">Link 2</a></li> 

Это ДИВ, где загружается страница:

<div id="loader"></div> 

проблема заключается в том, что только нагрузок " page1.html ", когда я нажимаю на первую ссылку. Если я нажимаю на вторую ссылку, не загружается «page2.html».

Я думаю, что это может быть проблема атрибута id ссылки «button2» на повтор, возможно, что-то происходит.

Что я делаю неправильно?

Спасибо!

Answer 1

Вы не должны использовать одинаковые идентификаторы для элементов. Каждый атрибут id должен быть уникальным (согласно спецификациям HTML4.01 и HTML5).

Было бы лучше использовать класс, чтобы идентифицировать эти кнопки вместо этого, как это:

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".buttons").on("click", function(){ 
      $("#loader").load($(this).attr("page")); 
      return false; 
     }); 
    }); 
</script> 

и баттона HTML:

<li><a href="#" title="" class="buttons" page="page1.html">Link 1</a></li> 
<li><a href="#" title="" class="buttons" page="page2.html">Link 2</a></li> 

Answer 2

«Что я делаю неправильно?»

Вы используете дубликаты идентификаторов, что запрещено в HTML. Вместо этого используйте имя класса или селектор элементов. Вы можете обратиться к текущей щелкнул кнопкой внутри обработчика событий с помощью $(this):

<li><a href="#" title="" class="button" page="page1.html">Link 1</a></li> 
<li><a href="#" title="" class="button" page="page2.html">Link 2</a></li> 

$(".button2").on("click", function(){ 
    $("#loader").load($(this).attr("page")); 
    return false; 
});