Question

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

这是我的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>

这是我的jquery：

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

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

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

但这并没有真正帮助我，因为我想决定哪个按钮＆＃39;点击。

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

Answer 1

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

解决方案：

<input type="checkbox" data-bind="checked : myCheckbox">
<span data-bind="text : myCheckbox"></span>
js//
var ViewModel = {
  myCheckbox : ko.observable(true) ;
}

ko.applyBindings(ViewModel)

或清洁：

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

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

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

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

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

jQuery块：

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

在Bootstrap分页上调用jquery函数

1 个答案: