javascript - 单击按钮不触发

Question

我有一个 html 按钮，它连接到页面顶部的 JQuery 函数，但点击似乎没有触发？我有什么遗漏的吗？

$(function(){
                $('#ctl00_content_hidePast').click(function() {
                    var dt = new Date($.now() - 30 * 60000);
                    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
                    $("td.bgtime").each(function() {
                        var bookingTime = ($(this).text().split(':'));
                        var d = new Date();
                        d.setHours(+bookingTime[0]);
                        d.setMinutes(bookingTime[1]);

                        var state = $("#ctl00_content_hdnPastBookingToggle").val();

                        if ($(d) > time) {
                            var timeRow = $(this).parent();
                            $(timeRow).toggle("slow",
                                function() {
                                    if (state.val === "0") {
                                        state.val = "1";} 
                                    else if (state.val === "1") {
                                        state.val = "0";
                                    };
                                });
                        };
                    });
                });
            });

还有按钮:

<button id="ctl00_content_hidePast"><i class='fa fa-eye-slash'></i> Hide/Show Past Bookings</button>

Answer 1

尝试

$(function(){
                $(document).on('click','#ctl00_content_hidePast', function() {
                    var dt = new Date($.now() - 30 * 60000);
                    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
                    $("td.bgtime").each(function() {
                        var bookingTime = ($(this).text().split(':'));
                        var d = new Date();
                        d.setHours(+bookingTime[0]);
                        d.setMinutes(bookingTime[1]);

                        var state = $("#ctl00_content_hdnPastBookingToggle").val();

                        if ($(d) > time) {
                            var timeRow = $(this).parent();
                            $(timeRow).toggle("slow",
                                function() {
                                    if (state.val === "0") {
                                        state.val = "1";} 
                                    else if (state.val === "1") {
                                        state.val = "0";
                                    };
                                });
                        };
                    });
                });
            });

在本例中，您将事件绑定(bind)到文档。当你有动态 dom 元素时通常会使用它。您不需要将单击事件绑定(bind)到文档。实际上建议将其附加到非动态父级。例如将包含按钮的 div。在这种情况下，代码将是:

  $(document).on('click','div that contains the buttons selector', function() ..

它只会让事情变得更轻松。但由于我没有 dom 结构，我给了你一个在任何情况下都有效的答案。