0

我有一个 Telerik RadDatePicker，我试图在控件具有焦点时将一个类应用于控件，并在控件失去焦点时将其删除。我正在使用这个 jQuery：

$('#dialogNewCrm input, #txtNotes, .riTextBox').focusin(function() {
    $(this).addClass('highlight');
});

$('#dialogNewCrm input, #txtNotes, .riTextBox').focusout(function () {
    $(this).removeClass('highlight');
});

.riTextBox是分配给 RadDatePicker 控件的类。我尝试向函数添加警报并触发警报，所以我知道事件函数正在正确触发。我还使用 Chrome 调试器来检查控件。在我所有的文本框控件上，正在添加类，但不是.riTextBox控件。

有没有人有什么建议？一切似乎都很好，但它根本没有将类应用于控件。这让我相信，也许它触发了我的事件，应用了类，然后 Telerik 可能有他们自己的focusin事件处理程序，在我的事件之后触发并清除所有 CSS 样式并应用它们自己的样式。如果是这种情况，我的问题可能应该是，在 Telerik 之后，有没有办法让我的事件最后触发？

下面是 Telerik 的 RadDatePicker 生成的 HTML：

<div id="ctl00_ContentPlaceHolder1_txtBirthDate_wrapper" class="RadPicker RadPicker_Default" style="display:inline-block;width:160px;">
  <input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_ContentPlaceHolder1_txtBirthDate" name="ctl00$ContentPlaceHolder1$txtBirthDate" type="text" class="rdfd_ radPreventDecorate" value="" title="Visually hidden input created for functionality purposes."><table cellspacing="0" class="rcTable rcSingle" summary="Table holding date picker control for selection of dates." style="width:100%;">
    <caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col">RadDatePicker</th>
      </tr>
    </thead><tbody>
      <tr>
        <td class="rcInputCell" style="width:100%;"><span id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_wrapper" class="riSingle RadInput RadInput_Default" style="display: block; width: 100%;"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput" name="ctl00$ContentPlaceHolder1$txtBirthDate$dateInput" class="riTextBox riEnabled" type="text"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" name="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" type="hidden" autocomplete="off" value="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;&quot;,&quot;validationText&quot;:&quot;&quot;,&quot;valueAsString&quot;:&quot;&quot;,&quot;minDateStr&quot;:&quot;1900-01-01-00-00-00&quot;,&quot;maxDateStr&quot;:&quot;2099-12-31-00-00-00&quot;,&quot;lastSetTextBoxValue&quot;:&quot;&quot;}"></span></td><td><a title="Open the calendar popup." href="#" id="ctl00_ContentPlaceHolder1_txtBirthDate_popupButton" class="rcCalPopup">Open the calendar popup.</a><div id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_wrapper" style="display:none;">
          <table id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar" summary="Calendar control which enables the selection of dates." cellspacing="0" class="RadCalendar RadCalendar_Default" border="0">
            <caption>
              <span style="display:none;">Calendar</span>
            </caption><thead>
              <tr>
                <td class="rcTitlebar"><table cellspacing="0" summary="Title and navigation which can change and show the current year and month." border="0">
                  <caption>
                    <span style="display:none;">Title and navigation</span>
                  </caption><thead>
                    <tr style="display:none;">
                      <th scope="col">Title and navigation</th>
                    </tr>
                  </thead><tbody>
  <tr>
    <td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_FNP" class="rcFastPrev" title="<<" href="#">&lt;&lt;</a></td><td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_NP" class="rcPrev" title="<" href="#">&lt;</a></td><td id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Title" class="rcTitle">May 2014</td><td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_NN" class="rcNext" title=">" href="#">&gt;</a></td><td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_FNN" class="rcFastNext" title=">>" href="#">&lt;&lt;</a></td>
  </tr>
</tbody>
                </table></td>
              </tr>
            </thead><tbody>
  <tr>
    <td class="rcMain"><table id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top" class="rcMainTable" cellspacing="0" summary="Table containing all dates for the currently selected month." border="0">
  <caption>
    <span style="display:none;">May 2014</span>
  </caption><thead>
    <tr class="rcWeek">
      <th class="rcViewSel" scope="col">&nbsp;</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_1" title="Sunday" scope="col" abbr="Sun">S</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_2" title="Monday" scope="col" abbr="Mon">M</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_3" title="Tuesday" scope="col" abbr="Tue">T</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_4" title="Wednesday" scope="col" abbr="Wed">W</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_5" title="Thursday" scope="col" abbr="Thu">T</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_6" title="Friday" scope="col" abbr="Fri">F</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_7" title="Saturday" scope="col" abbr="Sat">S</th>
    </tr>
  </thead><tbody>
    <tr class="rcRow">
      <th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_1" scope="row">18</th><td class="rcOtherMonth" title="Sunday, April 27, 2014"><a href="#">27</a></td><td class="rcOtherMonth" title="Monday, April 28, 2014"><a href="#">28</a></td><td class="rcOtherMonth" title="Tuesday, April 29, 2014"><a href="#">29</a></td><td class="rcOtherMonth" title="Wednesday, April 30, 2014"><a href="#">30</a></td><td title="Thursday, May 01, 2014"><a href="#">1</a></td><td title="Friday, May 02, 2014"><a href="#">2</a></td><td class="rcWeekend" title="Saturday, May 03, 2014"><a href="#">3</a></td>
    </tr><tr class="rcRow">
      <th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_2" scope="row">19</th><td class="rcWeekend" title="Sunday, May 04, 2014"><a href="#">4</a></td><td title="Monday, May 05, 2014"><a href="#">5</a></td><td title="Tuesday, May 06, 2014"><a href="#">6</a></td><td title="Wednesday, May 07, 2014"><a href="#">7</a></td><td title="Thursday, May 08, 2014"><a href="#">8</a></td><td title="Friday, May 09, 2014"><a href="#">9</a></td><td class="rcWeekend" title="Saturday, May 10, 2014"><a href="#">10</a></td>
    </tr><tr class="rcRow">
      <th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_3" scope="row">20</th><td class="rcWeekend" title="Sunday, May 11, 2014"><a href="#">11</a></td><td title="Monday, May 12, 2014"><a href="#">12</a></td><td title="Tuesday, May 13, 2014"><a href="#">13</a></td><td title="Wednesday, May 14, 2014"><a href="#">14</a></td><td title="Thursday, May 15, 2014"><a href="#">15</a></td><td title="Friday, May 16, 2014"><a href="#">16</a></td><td class="rcWeekend" title="Saturday, May 17, 2014"><a href="#">17</a></td>
    </tr><tr class="rcRow">
      <th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_4" scope="row">21</th><td class="rcWeekend" title="Sunday, May 18, 2014"><a href="#">18</a></td><td title="Monday, May 19, 2014"><a href="#">19</a></td><td title="Tuesday, May 20, 2014"><a href="#">20</a></td><td title="Wednesday, May 21, 2014"><a href="#">21</a></td><td title="Thursday, May 22, 2014"><a href="#">22</a></td><td title="Friday, May 23, 2014"><a href="#">23</a></td><td class="rcWeekend" title="Saturday, May 24, 2014"><a href="#">24</a></td>
    </tr><tr class="rcRow">
      <th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_5" scope="row">22</th><td class="rcWeekend" title="Sunday, May 25, 2014"><a href="#">25</a></td><td title="Monday, May 26, 2014"><a href="#">26</a></td><td title="Tuesday, May 27, 2014"><a href="#">27</a></td><td title="Wednesday, May 28, 2014"><a href="#">28</a></td><td title="Thursday, May 29, 2014"><a href="#">29</a></td><td title="Friday, May 30, 2014"><a href="#">30</a></td><td class="rcWeekend" title="Saturday, May 31, 2014"><a href="#">31</a></td>
    </tr><tr class="rcRow">
      <th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_6" scope="row">23</th><td class="rcOtherMonth" title="Sunday, June 01, 2014"><a href="#">1</a></td><td class="rcOtherMonth" title="Monday, June 02, 2014"><a href="#">2</a></td><td class="rcOtherMonth" title="Tuesday, June 03, 2014"><a href="#">3</a></td><td class="rcOtherMonth" title="Wednesday, June 04, 2014"><a href="#">4</a></td><td class="rcOtherMonth" title="Thursday, June 05, 2014"><a href="#">5</a></td><td class="rcOtherMonth" title="Friday, June 06, 2014"><a href="#">6</a></td><td class="rcOtherMonth" title="Saturday, June 07, 2014"><a href="#">7</a></td>
    </tr>
  </tbody>
</table></td>
  </tr>
</tbody>
          </table><input type="hidden" name="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_SD" id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_SD" value="[]"><input type="hidden" name="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_AD" id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_AD" value="[[1900,1,1],[2099,12,30],[2014,5,22]]">
        </div></td>
      </tr>
    </tbody>
  </table><input id="ctl00_ContentPlaceHolder1_txtBirthDate_ClientState" name="ctl00_ContentPlaceHolder1_txtBirthDate_ClientState" type="hidden" value="{&quot;minDateStr&quot;:&quot;1900-01-01-00-00-00&quot;,&quot;maxDateStr&quot;:&quot;2099-12-31-00-00-00&quot;}" autocomplete="off">
</div>
4

0 回答 0