使用jQuery在div中加载页面

Question

这个jQuery代码在div中加载一个特定的页面（这个工作）：

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

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

另外，我有2个属性“page”的链接，表示要在div中加载的html文件：

<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：

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

问题是当我点击第一个链接时只加载“page1.html”。 如果我点击第二个链接不加载“page2.html”。

我认为这可能是链接“button2”的id属性的问题，重复可能会发生一些事情。

我究竟做错了什么？

谢谢！

Answer 1

您不得对元素使用相同的ID。 每个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

“我究竟做错了什么？”

您正在使用重复的ID，这在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;
});