Jquery在表中嵌套了选择器div

时间：2012-01-11 10:00:44

标签： jquery jquery-ui jquery-mobile

我正在使用jquery mobile datepicker，我需要捕获日历点击事件，我有2个datepicker div，我想分别捕获

目前我正在使用以下选择器，它工作正常，但现在我想分别处理第一个div的第一个选择器和div 2的第二个选择器。

 $(function () {
 $("table.ui-datepicker-calendar a").live("click", function () {  alert("aa"); });
});

我尝试过使用过，但是这个没有捕捉到这个事件。

 $(function () {
     $("div#startPicker table.ui-datepicker-calendar a").live("click", function () {  alert("aa"); });
    });

以下是div one的dom 

<div id="startPicker" tabindex="-1">   
<input id="PickUpDate" name="PickUpDate" value="" class="smaller ui-input-text ui-body-a ui-corner-all ui-shadow-inset" placeholder="" required="true" type="date">
<div tabindex="-1" class="hasDatepicker" id="dp1326273193191">
<div tabindex="-1" style="display: none;" class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-body-c ui-corner-top">
<a data-theme="c" href="#" class="ui-datepicker-prev ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', -1, 'M');" title="Prev">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>
<a data-theme="c" href="#" class="ui-datepicker-next ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', +1, 'M');" title="Next">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">
<span class="ui-icon ui-icon-circle-triangle-e">Next</span></span>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span>&nbsp;<span class="ui-datepicker-year">2012</span></div></div>
<table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end ui-bar-c">
<span title="Sunday">Su</span></th><th class="ui-bar-c"><span title="Monday">Mo</span></th>
<th class="ui-bar-c"><span title="Tuesday">Tu</span></th><th class="ui-bar-c">
<span title="Wednesday">We</span></th>
<th class="ui-bar-c"><span title="Thursday">Th</span></th><th class="ui-bar-c">
<span title="Friday">Fr</span></th><th class="ui-datepicker-week-end ui-bar-c">
<span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">1</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">2</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">3</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">4</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">5</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">6</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">7</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">8</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">9</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">10</a></td><td class="ui-datepicker-today ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-state-highlight ui-btn ui-btn-up-c ui-btn-up-e" href="#">11</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">12</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">13</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">14</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">15</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">16</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">17</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">18</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">19</a></td>
<td class="ui-datepicker-current-day ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-state-active ui-btn ui-btn-up-c ui-btn-active" href="#">20</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">21</a></td></tr><tr>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">22</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">23</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">24</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">25</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">26</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">27</a></td><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">28</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">29</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">30</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">31</a></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">1</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">2</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">3</span></td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">4</span></td></tr></tbody></table></div></div>           
</div>

和div 2 

<div id="endPicker" tabindex="-1">   
<input id="PickUpDate" name="PickUpDate" value="" class="smaller ui-input-text ui-body-a ui-corner-all ui-shadow-inset" placeholder="" required="true" type="date">
<div tabindex="-1" class="hasDatepicker" id="dp1326273193191">
<div tabindex="-1" style="display: none;" class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-body-c ui-corner-top">
<a data-theme="c" href="#" class="ui-datepicker-prev ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', -1, 'M');" title="Prev">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>
<a data-theme="c" href="#" class="ui-datepicker-next ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', +1, 'M');" title="Next">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">
<span class="ui-icon ui-icon-circle-triangle-e">Next</span></span>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span>&nbsp;<span class="ui-datepicker-year">2012</span></div></div>
<table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end ui-bar-c">
<span title="Sunday">Su</span></th><th class="ui-bar-c"><span title="Monday">Mo</span></th>
<th class="ui-bar-c"><span title="Tuesday">Tu</span></th><th class="ui-bar-c">
<span title="Wednesday">We</span></th>
<th class="ui-bar-c"><span title="Thursday">Th</span></th><th class="ui-bar-c">
<span title="Friday">Fr</span></th><th class="ui-datepicker-week-end ui-bar-c">
<span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">1</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">2</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">3</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">4</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">5</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">6</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">7</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">8</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">9</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">10</a></td><td class="ui-datepicker-today ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-state-highlight ui-btn ui-btn-up-c ui-btn-up-e" href="#">11</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">12</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">13</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">14</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">15</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">16</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">17</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">18</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">19</a></td>
<td class="ui-datepicker-current-day ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-state-active ui-btn ui-btn-up-c ui-btn-active" href="#">20</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">21</a></td></tr><tr>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">22</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">23</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">24</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">25</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">26</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">27</a></td><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">28</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">29</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">30</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">31</a></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">1</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">2</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">3</span></td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">4</span></td></tr></tbody></table></div></div>           
</div>

1 个答案:

答案 0 :(得分：1)

您可以使用datepicker组件的click事件来检测日期的选择，而不是在a上使用onSelect事件。

来自http://jqueryui.com/demos/datepicker/#event-onSelect

  

允许您在选择日期选择器时定义自己的事件。   该函数接收所选日期作为文本和日期选择器   实例作为参数。这指的是相关的输入字段。

     

代码示例

     

提供一个回调函数来将onSelect事件作为init处理   选项。 

    $('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

可能你可以使用不同的id来输入日期，比如说pickdate1和pickupdate2。

可以选择第一个日期选择器 
$('#pickupdate1').datepicker({
       onSelect: function(dateText, inst) { alert("first"); }
    });

和

的第二个日期选择器 
$('#pickupdate2').datepicker({
           onSelect: function(dateText, inst) { alert("second"); }
        });

作为旁注，我建议使用日期框（http://dev.jtsage.com/jQM-DateBox/）组件与jQuery Mobile一起使用，因为它更适合移动网络。

相关问题
最新问题