jQuery Klick funtion führt nur einmal

ich mit den Bootstrap-Datepicker aus dieser Quelle arbeite: http://eonasdan.github.io/bootstrap-datetimepicker/jQuery Klick funtion führt nur einmal

Ich habe bereits einen Datepicker fast wie ich einen Inline-Picker sein will, von dem ich brauche Veränderungen zu erkennen (live). Es sieht wie folgt aus:

es mit diesem Code generiert wird:

<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>

und Javascript, die es nennt:

$('#start_datepicker').datetimepicker(
{ 
    format: "D-M-Y", 
    locale: "de", 
    inline: true, 
    calendarWeeks: true 
}); 

$('#start_timepicker').datetimepicker(
{ 
    format: "HHmm", 
    stepping: 15, 
    locale: "de", 
    inline: true 
});

Dies funktioniert gut, und einige Code erzeugt Das sieht so aus:

<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>

Die dunkelblaue Linie hebt das aktuelle td-Element hervor, in dem die Klasse aktiv ist. Bei jeder Änderung (es gibt immer nur ein td-Element mit dieser Klasse) Ich möchte ein anderes Element aktualisieren und es auf den Wert des Attributs data-day vom aktuell aktiven Element setzen (OHNE dass es periodisch überprüft werden muss).

Ich habe bereits ein kleines Schnipsel, das funktioniert, aber nur einmal und nicht ganz richtig. Wenn ich es einmal ändere, erhält es den Wert des initial aktiven td und für weitere Änderungen bleibt der Wert derselbe (des Elements, das es anzeigt, ein Bereich mit id: start_date).

Dieser Code soll ti das desiered Verhalten erreichen:

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

ich den Fehler denken über innerhalb der drei Linien sein müssen.

Wenn ich weitere Informationen hinzufügen muss, um meine Frage zu klären, sagen Sie es mir bitte.

Vielen Dank im Voraus John

Quelle

2016-05-10 JRsz

Rechtsklick> Kopieren> Kopieren Sie äußere HTML – ElGavilan

danken, Frage – JRsz

Die documentation fragt zu hören zu dp.change. Dies sollte funktionieren:

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

Quelle

2016-05-10 13:54:49 Chintan

das funktioniert, erstaunlich. Du hast gerade meinen Tag gemacht :) – JRsz

Vielleicht ist der Kalander dom on the fly ersetzt, so dass Ihr click Ereignis verloren gettin. Versuchen Sie folgendes:

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

(siehe http://api.jquery.com/on/)

Quelle

2016-05-10 13:23:15

aktualisiert ich werde es versuchen :) – JRsz

Leider ist dies nicht bei allen. Der Wert ist nicht einmal in #start_date aktualisiert – JRsz

Sie können "change" -Ereignis im Eingabe verwenden, die statt finden das td-Element hinzugefügt wird:

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

Quelle

2016-05-10 13:30:51

Das ist, was ich versucht habe, aber es hat nicht funktioniert. Diese Änderung wird nicht erkannt. – JRsz

Ja, Sie haben Recht, bitte versuchen Sie es erneut, ich habe den Code geändert :) –

Nein, das funktioniert auch nicht. Übrigens habe ich keine Inout-Elemente. Und wenn ich die Eingabe in td ändere, funktioniert es nicht so gut. – JRsz

jQuery Klick funtion führt nur einmal

Antwort

Verwandte Themen