jQuery hide only fires once

Question

I have a calendar that does not close on date select. So I have targeted a class(.day) to close the calendar when clicked. However, when I reopen the calendar and select a new date it does not close a second time. I have looked for answers on here and although similar titles and issues the code isn't quite the same...

$('.day').click(function () {
  $(".datepicker").hide();
});

<span class="input-append date dp-ticket" data-date="today" data-date-format="dd-mm-yyyy">
  <input type="text" class="add-on form-control col-xs-10 col-sm-10 col-md-10 col-lg-10" placeholder="Or, choose any date" name="startdate" id="startdate">
  <button class="add-on btn btn-search col-xs-2 col-sm-2 col-md-2 col-lg-2" type="button">
    <span class="icon-calendar"></span>
  </button>
</span>

i guess .day elements are generated by plugin, so for new ones you should use delegation, e.g: `$(document.body).on('click', '.day', function () { $(".datepicker").hide(); });` — A. Wolff, Dec 13 '13 at 16:00
Found answer here - http://stackoverflow.com/questions/21151830/bootstrap-datepicker-hide-after-selection — Tom Rudge, May 20 '14 at 09:15

score 0 · Answer 1 · answered Dec 13 '13 at 15:38

0

Try using on.

$('.day').on('click', function () {
  $(".datepicker").hide();
});

answered Dec 13 '13 at 15:38

Neel

220
1
10

It's almost the same. Both the functions will give the same output. – Devendra Lattu Dec 13 '13 at 15:39

score 0 · Answer 2 · edited Dec 13 '13 at 17:18

Sorry but I'm not seeing .day or .datepicker in the code sample other than in the jQuery. Maybe I'm missing something.... lol

My guess is that the script registers the original hide event but does not register that .datepicker is revealed again when you try and change the date, so as far as the script knows it's still hidden when you change the date.

You could try putting an .change() to detect a change in the value of the date field(or wherever your placing the date data.)

$(".foo").val().change(function() {
  $(".datepicker").hide();
});

You may need to set a default value, but every time it's changed it will run the function to hide .datepicker.

score 0 · Answer 3 · answered Dec 13 '13 at 17:19

I'm not sure how .day is being implimented, as you do not show it in your code, but because it only fires once, I am thinking that you are adding .day to the DOM dynamically.

If that is the case, you can do this:

$('SELECTOR_OF_PARENT').on('click', '.day', function(){
    $(".datepicker").hide();
});

You may also do it like this

$(document).on('click', '.day', function(){
    $(".datepicker").hide();
});

Here is more information for .on()

jQuery hide only fires once

3 Answers3