Fatal编程技术网
  • javascript/
  • Javascript jQuery单击功能只执行一次

Javascript jQuery单击功能只执行一次

javascript jquery html twitter-bootstrap

Javascript jQuery单击功能只执行一次,javascript,jquery,html,twitter-bootstrap,datepicker,Javascript,Jquery,Html,Twitter Bootstrap,Datepicker,我正在使用来自以下来源的引导日期选择器： 我已经有了一个日期选择器，几乎和我想要的一样，一个内联选择器，我需要从中检测更改（实时）。 看起来是这样的： <div id="start_datepicker" style=""> <div class="bootstrap-datetimepicker-widget usetwentyfour" style="display: block;"&g

我正在使用来自以下来源的引导日期选择器：

我已经有了一个日期选择器，几乎和我想要的一样，一个内联选择器，我需要从中检测更改（实时）。 看起来是这样的：

<div id="start_datepicker" style="">
    <div class="bootstrap-datetimepicker-widget usetwentyfour" style="display: block;">
        <ul class="list-unstyled">
            <li>
                <div class="datepicker">
                    <div class="datepicker-days" style="display: block;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title=
                                    "Previous Month"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch" title="Select Month">Mai 2016</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Month"></span></th>
                                </tr>
                                <tr>
                                    <th class="cw">#</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Di</th>
                                    <th class="dow">Mi</th>
                                    <th class="dow">Do</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                    <th class="dow">So</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="cw">17</td>
                                    <td class="day old" data-action="selectDay" data-day="25.04.2016">25</td>
                                    <td class="day old" data-action="selectDay" data-day="26.04.2016">26</td>
                                    <td class="day old" data-action="selectDay" data-day="27.04.2016">27</td>
                                    <td class="day old" data-action="selectDay" data-day="28.04.2016">28</td>
                                    <td class="day old" data-action="selectDay" data-day="29.04.2016">29</td>
                                    <td class="day old weekend" data-action="selectDay" data-day="30.04.2016">30</td>
                                    <td class="day weekend" data-action="selectDay" data-day="01.05.2016">1</td>
                                </tr>
                                <tr>
                                    <td class="cw">18</td>
                                    <td class="day" data-action="selectDay" data-day="02.05.2016">2</td>
                                    <td class="day" data-action="selectDay" data-day="03.05.2016">3</td>
                                    <td class="day" data-action="selectDay" data-day="04.05.2016">4</td>
                                    <td class="day" data-action="selectDay" data-day="05.05.2016">5</td>
                                    <td class="day" data-action="selectDay" data-day="06.05.2016">6</td>
                                    <td class="day weekend" data-action="selectDay" data-day="07.05.2016">7</td>
                                    <td class="day weekend" data-action="selectDay" data-day="08.05.2016">8</td>
                                </tr>
                                <tr>
                                    <td class="cw">19</td>
                                    <td class="day" data-action="selectDay" data-day="09.05.2016">9</td>
                                    <td class="day active today" data-action="selectDay" data-day="10.05.2016">10</td>
                                    <td class="day" data-action="selectDay" data-day="11.05.2016">11</td>
                                    <td class="day" data-action="selectDay" data-day="12.05.2016">12</td>
                                    <td class="day" data-action="selectDay" data-day="13.05.2016">13</td>
                                    <td class="day weekend" data-action="selectDay" data-day="14.05.2016">14</td>
                                    <td class="day weekend" data-action="selectDay" data-day="15.05.2016">15</td>
                                </tr>
                                <tr>
                                    <td class="cw">20</td>
                                    <td class="day" data-action="selectDay" data-day="16.05.2016">16</td>
                                    <td class="day" data-action="selectDay" data-day="17.05.2016">17</td>
                                    <td class="day" data-action="selectDay" data-day="18.05.2016">18</td>
                                    <td class="day" data-action="selectDay" data-day="19.05.2016">19</td>
                                    <td class="day" data-action="selectDay" data-day="20.05.2016">20</td>
                                    <td class="day weekend" data-action="selectDay" data-day="21.05.2016">21</td>
                                    <td class="day weekend" data-action="selectDay" data-day="22.05.2016">22</td>
                                </tr>
                                <tr>
                                    <td class="cw">21</td>
                                    <td class="day" data-action="selectDay" data-day="23.05.2016">23</td>
                                    <td class="day" data-action="selectDay" data-day="24.05.2016">24</td>
                                    <td class="day" data-action="selectDay" data-day="25.05.2016">25</td>
                                    <td class="day" data-action="selectDay" data-day="26.05.2016">26</td>
                                    <td class="day" data-action="selectDay" data-day="27.05.2016">27</td>
                                    <td class="day weekend" data-action="selectDay" data-day="28.05.2016">28</td>
                                    <td class="day weekend" data-action="selectDay" data-day="29.05.2016">29</td>
                                </tr>
                                <tr>
                                    <td class="cw">22</td>
                                    <td class="day" data-action="selectDay" data-day="30.05.2016">30</td>
                                    <td class="day" data-action="selectDay" data-day="31.05.2016">31</td>
                                    <td class="day new" data-action="selectDay" data-day="01.06.2016">1</td>
                                    <td class="day new" data-action="selectDay" data-day="02.06.2016">2</td>
                                    <td class="day new" data-action="selectDay" data-day="03.06.2016">3</td>
                                    <td class="day new weekend" data-action="selectDay" data-day="04.06.2016">4</td>
                                    <td class="day new weekend" data-action="selectDay" data-day="05.06.2016">5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="datepicker-months" style="display: none;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title=
                                    "Previous Year"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch" title="Select Year">2016</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Year"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8"><span class="month" data-action="selectMonth">Jan.</span><span class="month" data-action=
                                    "selectMonth">Febr.</span><span class="month" data-action="selectMonth">Mrz.</span><span class="month" data-action=
                                    "selectMonth">Apr.</span><span class="month active" data-action="selectMonth">Mai</span><span class="month"
                                    data-action="selectMonth">Jun.</span><span class="month" data-action="selectMonth">Jul.</span><span class="month"
                                    data-action="selectMonth">Aug.</span><span class="month" data-action="selectMonth">Sept.</span><span class="month"
                                    data-action="selectMonth">Okt.</span><span class="month" data-action="selectMonth">Nov.</span><span class="month"
                                    data-action="selectMonth">Dez.</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="datepicker-years" style="display: none;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Next Decade"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch" title="Select Decade">2011-2022</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title=
                                    "Previous Decade"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8"><span class="year" data-action="selectYear">2011</span><span class="year" data-action=
                                    "selectYear">2012</span><span class="year" data-action="selectYear">2013</span><span class="year" data-action=
                                    "selectYear">2014</span><span class="year" data-action="selectYear">2015</span><span class="year active" data-action=
                                    "selectYear">2016</span><span class="year" data-action="selectYear">2017</span><span class="year" data-action=
                                    "selectYear">2018</span><span class="year" data-action="selectYear">2019</span><span class="year" data-action=
                                    "selectYear">2020</span><span class="year" data-action="selectYear">2021</span><span class="year" data-action=
                                    "selectYear">2022</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="datepicker-decades" style="display: none;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title=
                                    "Previous Century"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch">1999-2099</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Century"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8"><span class="decade" data-action="selectDecade" data-selection="2005">2000 - 2011</span><span class=
                                    "decade" data-action="selectDecade" data-selection="2017">2012 - 2023</span><span class="decade" data-action=
                                    "selectDecade" data-selection="2029">2024 - 2035</span><span class="decade" data-action="selectDecade" data-selection=
                                    "2041">2036 - 2047</span><span class="decade" data-action="selectDecade" data-selection="2053">2048 -
                                    2059</span><span class="decade" data-action="selectDecade" data-selection="2065">2060 - 2071</span><span class="decade"
                                    data-action="selectDecade" data-selection="2077">2072 - 2083</span><span class="decade" data-action="selectDecade"
                                    data-selection="2089">2084 - 2095</span><span class="decade" data-action="selectDecade" data-selection="2101">2096 -
                                    2107</span><span></span><span></span><span></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </li>
            <li class="picker-switch accordion-toggle">
                <table class="table-condensed">
                    <tbody>
                        <tr>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </li>
        </ul>
    </div>
</div>

它由以下代码生成：

<div class="row">
    <div class="col-md-6">
        <div id="start_datepicker"></div>
    </div>
    <div class="col-md-6">
        <div id="start_timepicker"></div>
    </div>
</div>
这可以正常工作，并生成如下代码：

<div id="start_datepicker" style="">
    <div class="bootstrap-datetimepicker-widget usetwentyfour" style="display: block;">
        <ul class="list-unstyled">
            <li>
                <div class="datepicker">
                    <div class="datepicker-days" style="display: block;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title=
                                    "Previous Month"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch" title="Select Month">Mai 2016</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Month"></span></th>
                                </tr>
                                <tr>
                                    <th class="cw">#</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Di</th>
                                    <th class="dow">Mi</th>
                                    <th class="dow">Do</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                    <th class="dow">So</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="cw">17</td>
                                    <td class="day old" data-action="selectDay" data-day="25.04.2016">25</td>
                                    <td class="day old" data-action="selectDay" data-day="26.04.2016">26</td>
                                    <td class="day old" data-action="selectDay" data-day="27.04.2016">27</td>
                                    <td class="day old" data-action="selectDay" data-day="28.04.2016">28</td>
                                    <td class="day old" data-action="selectDay" data-day="29.04.2016">29</td>
                                    <td class="day old weekend" data-action="selectDay" data-day="30.04.2016">30</td>
                                    <td class="day weekend" data-action="selectDay" data-day="01.05.2016">1</td>
                                </tr>
                                <tr>
                                    <td class="cw">18</td>
                                    <td class="day" data-action="selectDay" data-day="02.05.2016">2</td>
                                    <td class="day" data-action="selectDay" data-day="03.05.2016">3</td>
                                    <td class="day" data-action="selectDay" data-day="04.05.2016">4</td>
                                    <td class="day" data-action="selectDay" data-day="05.05.2016">5</td>
                                    <td class="day" data-action="selectDay" data-day="06.05.2016">6</td>
                                    <td class="day weekend" data-action="selectDay" data-day="07.05.2016">7</td>
                                    <td class="day weekend" data-action="selectDay" data-day="08.05.2016">8</td>
                                </tr>
                                <tr>
                                    <td class="cw">19</td>
                                    <td class="day" data-action="selectDay" data-day="09.05.2016">9</td>
                                    <td class="day active today" data-action="selectDay" data-day="10.05.2016">10</td>
                                    <td class="day" data-action="selectDay" data-day="11.05.2016">11</td>
                                    <td class="day" data-action="selectDay" data-day="12.05.2016">12</td>
                                    <td class="day" data-action="selectDay" data-day="13.05.2016">13</td>
                                    <td class="day weekend" data-action="selectDay" data-day="14.05.2016">14</td>
                                    <td class="day weekend" data-action="selectDay" data-day="15.05.2016">15</td>
                                </tr>
                                <tr>
                                    <td class="cw">20</td>
                                    <td class="day" data-action="selectDay" data-day="16.05.2016">16</td>
                                    <td class="day" data-action="selectDay" data-day="17.05.2016">17</td>
                                    <td class="day" data-action="selectDay" data-day="18.05.2016">18</td>
                                    <td class="day" data-action="selectDay" data-day="19.05.2016">19</td>
                                    <td class="day" data-action="selectDay" data-day="20.05.2016">20</td>
                                    <td class="day weekend" data-action="selectDay" data-day="21.05.2016">21</td>
                                    <td class="day weekend" data-action="selectDay" data-day="22.05.2016">22</td>
                                </tr>
                                <tr>
                                    <td class="cw">21</td>
                                    <td class="day" data-action="selectDay" data-day="23.05.2016">23</td>
                                    <td class="day" data-action="selectDay" data-day="24.05.2016">24</td>
                                    <td class="day" data-action="selectDay" data-day="25.05.2016">25</td>
                                    <td class="day" data-action="selectDay" data-day="26.05.2016">26</td>
                                    <td class="day" data-action="selectDay" data-day="27.05.2016">27</td>
                                    <td class="day weekend" data-action="selectDay" data-day="28.05.2016">28</td>
                                    <td class="day weekend" data-action="selectDay" data-day="29.05.2016">29</td>
                                </tr>
                                <tr>
                                    <td class="cw">22</td>
                                    <td class="day" data-action="selectDay" data-day="30.05.2016">30</td>
                                    <td class="day" data-action="selectDay" data-day="31.05.2016">31</td>
                                    <td class="day new" data-action="selectDay" data-day="01.06.2016">1</td>
                                    <td class="day new" data-action="selectDay" data-day="02.06.2016">2</td>
                                    <td class="day new" data-action="selectDay" data-day="03.06.2016">3</td>
                                    <td class="day new weekend" data-action="selectDay" data-day="04.06.2016">4</td>
                                    <td class="day new weekend" data-action="selectDay" data-day="05.06.2016">5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="datepicker-months" style="display: none;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title=
                                    "Previous Year"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch" title="Select Year">2016</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Year"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8"><span class="month" data-action="selectMonth">Jan.</span><span class="month" data-action=
                                    "selectMonth">Febr.</span><span class="month" data-action="selectMonth">Mrz.</span><span class="month" data-action=
                                    "selectMonth">Apr.</span><span class="month active" data-action="selectMonth">Mai</span><span class="month"
                                    data-action="selectMonth">Jun.</span><span class="month" data-action="selectMonth">Jul.</span><span class="month"
                                    data-action="selectMonth">Aug.</span><span class="month" data-action="selectMonth">Sept.</span><span class="month"
                                    data-action="selectMonth">Okt.</span><span class="month" data-action="selectMonth">Nov.</span><span class="month"
                                    data-action="selectMonth">Dez.</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="datepicker-years" style="display: none;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Next Decade"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch" title="Select Decade">2011-2022</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title=
                                    "Previous Decade"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8"><span class="year" data-action="selectYear">2011</span><span class="year" data-action=
                                    "selectYear">2012</span><span class="year" data-action="selectYear">2013</span><span class="year" data-action=
                                    "selectYear">2014</span><span class="year" data-action="selectYear">2015</span><span class="year active" data-action=
                                    "selectYear">2016</span><span class="year" data-action="selectYear">2017</span><span class="year" data-action=
                                    "selectYear">2018</span><span class="year" data-action="selectYear">2019</span><span class="year" data-action=
                                    "selectYear">2020</span><span class="year" data-action="selectYear">2021</span><span class="year" data-action=
                                    "selectYear">2022</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="datepicker-decades" style="display: none;">
                        <table class="table-condensed">
                            <thead>
                                <tr>
                                    <th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title=
                                    "Previous Century"></span></th>
                                    <th class="picker-switch" colspan="6" data-action="pickerSwitch">1999-2099</th>
                                    <th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Century"></span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8"><span class="decade" data-action="selectDecade" data-selection="2005">2000 - 2011</span><span class=
                                    "decade" data-action="selectDecade" data-selection="2017">2012 - 2023</span><span class="decade" data-action=
                                    "selectDecade" data-selection="2029">2024 - 2035</span><span class="decade" data-action="selectDecade" data-selection=
                                    "2041">2036 - 2047</span><span class="decade" data-action="selectDecade" data-selection="2053">2048 -
                                    2059</span><span class="decade" data-action="selectDecade" data-selection="2065">2060 - 2071</span><span class="decade"
                                    data-action="selectDecade" data-selection="2077">2072 - 2083</span><span class="decade" data-action="selectDecade"
                                    data-selection="2089">2084 - 2095</span><span class="decade" data-action="selectDecade" data-selection="2101">2096 -
                                    2107</span><span></span><span></span><span></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </li>
            <li class="picker-switch accordion-toggle">
                <table class="table-condensed">
                    <tbody>
                        <tr>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </li>
        </ul>
    </div>
</div>
我想误差一定在上面三行之内

如果我需要添加更多信息来澄清我的问题，请告诉我

提前谢谢
John

可能日历dom被动态替换，因此您的
单击事件将丢失。试试这个：


$('#start_datepicker').on('click', 'td', function()
{
    $("#start_date").text($('#start_datepicker').find(".active").attr("data-day"));
});



（请参阅）
日历dom可能会被动态替换，因此您的
单击事件将丢失。试试这个：


$('#start_datepicker').on('click', 'td', function()
{
    $("#start_date").text($('#start_datepicker').find(".active").attr("data-day"));
});


（请参阅）
您可以在添加的输入中使用“更改”事件，而不是查找td元素：


$('#start_datepicker').find('input').change(function(){
    $("#start_date").text($(this).val());
});


您可以在添加的输入中使用“更改”事件，而不是查找td元素：


$('#start_datepicker').find('input').change(function(){
    $("#start_date").text($(this).val());
});


要求听dp.change。这应该起作用：


$("#start_datepicker").on("dp.change", function (e) {
   $("#start_date").text(e.date);
});


要求听dp.change。这应该起作用：


$("#start_datepicker").on("dp.change", function (e) {
   $("#start_date").text(e.date);
});



右键单击>复制>复制外部HTMLTANK you，问题已更新右键单击>复制>复制外部HTMLTANK you，问题已更新这根本不起作用。该值在#start_date中甚至一次都没有更新。不幸的是，这根本不起作用。该值在#start_date中甚至没有更新过一次。这是我尝试过的，但它不起作用。无法识别此更改。是的，您是对的，请重试，我修改了代码：）不，这也不起作用。顺便说一句，我没有输入元素。如果我把输入改成td，它也不起作用。这是我尝试过的，但它不起作用。无法识别此更改。是的，您是对的，请重试，我修改了代码：）不，这也不起作用。顺便说一句，我没有输入元素。如果我将输入更改为td，它也不起作用。