在Bootstrap分页上调用jquery函数

I'm trying to write code for a calendar where the user can switch between weeks.

我正在尝试为日历编写代码，用户可以在几周之间切换。

This is my html:

这是我的HTML：

<nav id="weekSwitcher" align="center">
    <ul class="pagination">
        <li id="previous">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">xyz</a></li>
        <li id="next">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

And this is my jquery:

这是我的jquery：

$('#previous').on('click', function() {
    // More code...
});

$('#next').on('click', function() {
    // More code...
});

I already saw this Question : Call jquery...

我已经看到了这个问题：调用jquery ...

But this didn't really help me since I want to decide which 'button' is clicked.

但这并没有真正帮助我，因为我想决定点击哪个“按钮”。

How can call my functions when a user clicks to switch between the weeks?

当用户点击几周之间切换时，如何调用我的功能？

1 个解决方案

#1

The main problem is that you don't wrap your code inside a $(document).ready block:

主要问题是你没有将代码包装在$（document）.ready块中：

Solution:

解：

$(document).ready(function() {
    $('#previous').on('click', function() {
        alert("Previous alert");
    });
});

$(document).ready(function() {
    $('#next').on('click', function() {
        alert("Next alert");
    });
});

or cleaner:

或清洁：

$(document).ready(function() {
    $('#previous').on('click', function() {
        alert("Previous alert");
    });

    $('#next').on('click', function() {
        alert("Next alert");
    });
});

Personally I would also use a second id for the your links (a tag), for example previous-link and next-link. The reason is, that the click() event is focused on the link itself (a tag) and not on the pagination list elements (li element in the ul list) - but that's just my personal opinion. Additionally you can also use the shorter notation for events:

我个人也会为你的链接（标签）使用第二个id，例如previous-link和next-link。原因是，click（）事件集中在链接本身（标记）而不是分页列表元素（ul列表中的li元素） - 但这只是我个人的意见。此外，您还可以使用较短的符号表示事件：

<nav id="weekSwitcher" align="center">
    <ul class="pagination">
        <li id="previous">
            <a href="#" id="previous-link" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li id="next">
            <a href="#" id="next-link" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

And the jQuery block:

和jQuery块：

$(document).ready(function() {
    $('#previous-link').click(function() {
        alert("Previous alert");
    });

    $('#next-link').click(function() {
        alert("Next alert");
    });
});

#1