jQuery单击功能只执行一次 [英] jQuery click funtion executes only once
本文介绍了jQuery单击功能只执行一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用这个来源的引导日期戳记：
使用此代码生成
< 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>
和调用它的Javascript：
$（'＃start_datepicker'）。datetimepicker（
{
格式：DMY，
locale：de，
inline ：true，
calendarWeeks：true
}）;
$（'＃start_timepicker'）datetimepicker（
{
格式：HHmm，
步进：15，
语言环境：de ，
inline：true
}）;
这个工作正常，并生成一些如下所示的代码：
< div id =start_datepickerstyle =>
< div class =bootstrap-datetimepicker-widget usetwentyfourstyle =display：block;>
< ul class =list-unsyled>
< li>
< div class =datepicker>
< div class =datepicker-daysstyle =display：block;>
< table class =table-condensed>
< thead>
< tr>
< th class =prevdata-action =previous>< span class =glyphicon glyphicon-chevron-lefttitle =
上一个月>< / span> ;< / th>
< th class =picker-switchcolspan =6data-action =pickerSwitchtitle =选择月份> Mai 2016< / th&
< th class =nextdata-action =next>< span class =glyphicon glyphicon-chevron-righttitle =下个月>< / 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 olddata-action =selectDaydata-day =25.04.2016> 25< / td>
< td class =day olddata-action =selectDaydata-day =26.04.2016> 26< / td>
< td class =day olddata-action =selectDaydata-day =27.04.2016> 27< / td>
< td class =day olddata-action =selectDaydata-day =28.04.2016> 28< / td>
< td class =day olddata-action =selectDaydata-day =29.04.2016> 29< / td>
< td class =day old weekenddata-action =selectDaydata-day =30.04.2016> 30< / td>
< td class =day weekenddata-action =selectDaydata-day =01.05.2016> 1< / td>
< / tr>
< tr>
< td class =cw> 18< / td>
< td class =daydata-action =selectDaydata-day =02.05.2016> 2< / td>
< td class =daydata-action =selectDaydata-day =03.05.2016> 3< / td>
< td class =daydata-action =selectDaydata-day =04.05.2016> 4< / td>
< td class =daydata-action =selectDaydata-day =05.05.2016> 5< / td>
< td class =daydata-action =selectDaydata-day =06.05.2016> 6< / td>
< td class =day weekenddata-action =selectDaydata-day =07.05.2016> 7< / td>
< td class =day weekenddata-action =selectDaydata-day =08.05.2016> 8< / td>
< / tr>
< tr>
< td class =cw> 19< / td>
< td class =daydata-action =selectDaydata-day =09.05.2016> 9< / td>
< td class =day active todaydata-action =selectDaydata-day =10.05.2016> 10< / td>
< td class =daydata-action =selectDaydata-day =11.05.2016> 11< / td>
< td class =daydata-action =selectDaydata-day =12.05.2016> 12< / td>
< td class =daydata-action =selectDaydata-day =13.05.2016> 13< / td>
< td class =day weekenddata-action =selectDaydata-day =14.05.2016> 14< / td>
< td class =day weekenddata-action =selectDaydata-day =15.05.2016> 15< / td>
< / tr>
< tr>
< td class =cw> 20< / td>
< td class =daydata-action =selectDaydata-day =16.05.2016> 16< / td>
< td class =daydata-action =selectDaydata-day =17.05.2016> 17< / td>
< td class =daydata-action =selectDaydata-day =18.05.2016> 18< / td>
< td class =daydata-action =selectDaydata-day =19.05.2016> 19< / td>
< td class =daydata-action =selectDaydata-day =20.05.2016> 20< / td>
< td class =day weekenddata-action =selectDaydata-day =21.05.2016> 21< / td>
< td class =day weekenddata-action =selectDaydata-day =22.05.2016> 22< / td>
< / tr>
< tr>
< td class =cw> 21< / td>
< td class =daydata-action =selectDaydata-day =23.05.2016> 23< / td>
< td class =daydata-action =selectDaydata-day =24.05.2016> 24< / td>
< td class =daydata-action =selectDaydata-day =25.05.2016> 25< / td>
< td class =daydata-action =selectDaydata-day =26.05.2016> 26< / td>
< td class =daydata-action =selectDaydata-day =27.05.2016> 27< / td>
< td class =day weekenddata-action =selectDaydata-day =28.05.2016> 28< / td>
< td class =day weekenddata-action =selectDaydata-day =29.05.2016> 29< / td>
< / tr>
< tr>
< td class =cw> 22< / td>
< td class =daydata-action =selectDaydata-day =30.05.2016> 30< / td>
< td class =daydata-action =selectDaydata-day =31.05.2016> 31< / td>
< td class =day newdata-action =selectDaydata-day =01.06.2016> 1< / td>
< td class =day newdata-action =selectDaydata-day =02.06.2016> 2< / td>
< td class =day newdata-action =selectDaydata-day =03.06.2016> 3< / td>
< td class =day new weekenddata-action =selectDaydata-day =04.06.2016> 4< / td>
< td class =day new weekenddata-action =selectDaydata-day =05.06.2016> 5< / td>
< / tr>
< / tbody>
< / table>
< / div>
< div class =datepicker-monthsstyle =display：none;>
< table class =table-condensed>
< thead>
< tr>
< th class =prevdata-action =previous>< span class =glyphicon glyphicon-chevron-lefttitle =
上一年>< / span> ;< / th>
< th class =picker-switchcolspan =6data-action =pickerSwitchtitle =选择年> 2016< / th>
< th class =nextdata-action =next>< span class =glyphicon glyphicon-chevron-righttitle =Next Year>< / span>< / th
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =8>< span class =monthdata-action =selectMonth> Jan.< / span>< span class =monthdata-action =
selectMonth> Febr。< / span>< span class =monthdata-action =selectMonth> Mrz。< / span>< span class =month action =
selectMonth> Apr< / span>< span class =month activedata-action =selectMonth> Mai< / span>< span class =month
data-action =selectMonth> Jun。< / span>< span class =monthdata-action =selectMonth> Jul。< / span>< span class =month
data-action =selectMonth> Aug.< / span>< span class =monthdata-action =selectMonth> Sept.< / span>< span class = 月
data-action =selectMonth> Okt.< / span>< span class =monthdata-acti on =selectMonth> Nov.< / span>< span class =month
data-action =selectMonth> Dez.< / span>< / td>
< / tr>
< / tbody>
< / table>
< / div>
< div class =datepicker-yearsstyle =display：none;>
< table class =table-condensed>
< thead>
< tr>
< th class =prevdata-action =previous>< span class =glyphicon glyphicon-chevron-lefttitle =Next Decade>< / span>< / th
< th class =picker-switchcolspan =6data-action =pickerSwitchtitle =选择十进制> 2011-2022< / th>
< th class =nextdata-action =next>< span class =glyphicon glyphicon-chevron-righttitle =
上一个十年>< / span> ;< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =8>< span class =yeardata-action =selectYear> 2011< / span>< span class =yeardata-action =
selectYear> 2012< / span>< span class =yeardata-action =selectYear> 2013< / span>< span class =yeardata-action =
selectYear> 2014< / span>< span class =yeardata-action =selectYear> 2015< / span>< span class =year activedata-action =
selectYear> 2016< / span>< span class =yeardata-action =selectYear> 2017< / span>< span class =yeardata-action =
selectYear > 2018< / span>< span class =yeardata-action =selectYear> 2019< / span>< span class =yeardata-action =
selectYear> 2020< / span>< span class =yeardata-action =selectYear> 2021< / span>< span class =yeardata-action =
selectYear> 2022< / span>< / td>
< / tr>
< / tbody>
< / table>
< / div>
< div class =datepicker-decadestyle =display：none;>
< table class =table-condensed>
< thead>
< tr>
< th class =prevdata-action =previous>< span class =glyphicon glyphicon-chevron-lefttitle =
上一世纪>< / span> ;< / th>
< th class =picker-switchcolspan =6data-action =pickerSwitch> 1999-2099< / th>
< th class =nextdata-action =next>< span class =glyphicon glyphicon-chevron-righttitle =Next Century>< / span>< / th
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =8>< span class =decadedata-action =selectDecadedata-selection =2005> 2000 - 2011< / span>< span class =
decadedata-action =selectDecadedata-selection =2017> 2012 - 2023< / span>< span class =decadedata-action =
selectDecade -selection =2029> 2024 - 2035< / span>< span class =decadedata-action =selectDecadedata-selection =
2041> 2036 - 2047< / span> < span class =decadedata-action =selectDecadedata-selection =2053> 2048 -
2059< / span>< span class =decadedata-action =selectDecade data-selection =2065> 2060 - 2071< / span>< span class =decade
data-action =selectDecadedata-selection =2077> 2072 - 2083< / span> ;< span class =decadedata- action =selectDecade
data-selection =2089> 2084 - 2095< / span>< span class =decadedata-action =selectDecadedata-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>
深蓝色的行突出显示当前的td元素，其中有类活动。在每个更改（这个类总是只有一个td元素）
我想更新另一个元素，并将其设置为当前活动元素的属性data-day的值（不必定期检查它）
我已经有一个小片段，但只有一次而不完全正确。如果我更改它一旦得到初始活动td的值，并且对于任何进一步的更改，值保持不变（显示它的元素，具有id：start_date的跨度）。
这段代码被认为是实现desiered的行为：
$（'＃start_datepicker'）find（ td）。click（function（）
{
$（＃start_date）。text（$（'＃start_datepicker'）。find（。active）。attr（data-day ））;
}）;
我认为错误必须在3行以内。
如果我需要添加更多信息来清除我的问题，请告诉我。
提前感谢
John
解决方案
$（＃start_datepicker）。on（dp.change，function（e）{
$（＃start_date）。text（e.date）;
}）;
I am working with the bootstrap datepicker from this source: http://eonasdan.github.io/bootstrap-datetimepicker/
I have already a datepicker almost as I want to to be, an inline picker from which I need to detect changes (live). It looks like this:
It is generated with this Code:
<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>
and the Javascript which calls it:
$('#start_datepicker').datetimepicker(
{
format: "D-M-Y",
locale: "de",
inline: true,
calendarWeeks: true
});
$('#start_timepicker').datetimepicker(
{
format: "HHmm",
stepping: 15,
locale: "de",
inline: true
});
This works fine and generates some code which looks like this:
<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>
The dark blue line highlights the current td element, which has the class active. On each change (there is always only one td element with this class) I want to update another element and set it to the value of the attribute data-day from the currently active element (WITHOUT having to check it periodically).
I already have a small snippet which works, but only once and not entirely correct. If I change it once it gets the value of the initial active td and for any further changes the value remains the same (of the element which displays it, a span with id: start_date).
This code is supposed ti achieve the desiered behaviour:
$('#start_datepicker').find("td").click(function()
{
$("#start_date").text($('#start_datepicker').find(".active").attr("data-day"));
});
I think the error must be within the 3 lines above.
If I need to add any more information to clearify my question please tell me.
Thanks in advance John
解决方案
The documentation asks to listen to dp.change. This should work:
$("#start_datepicker").on("dp.change", function (e) {
$("#start_date").text(e.date);
});
这篇关于jQuery单击功能只执行一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
