jQuery event handler with multiple links won't work

Question

I'm trying to append the jQuery ui-datepicker and I can't get the event handler working:

$( '.ui-datepicker' ).on('click', 'a.ui-datepicker-next', 'a.ui-datepicker-prev', function( event ) {
    event.preventDefault();
        console.log("CLICK");
});

I've got nothing logging to the console when I click the links. Here is the html:

<div id="ui-datepicker-div" class="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-corner-all">
        <a class="ui-datepicker-next ui-corner-all"...></a>
        <a class="ui-datepicker-prev ui-corner-all"...></a>
        ...

What do I need to put as the event handler to trigger this? The jQuery is in a <script>jQuery here</script> in the footer of my html.

EDIT: links were incorrect - a.ui-datepicker-month and a.ui-datepicker-year changed to a.ui-datepicker-next and a.ui-datepicker-prev

Thanks

Rory McCrossan · Accepted Answer · 2017-03-08 16:47:02Z

2

Your syntax isn't quite right. The selectors need to be comma delimited but in the same string. Try this:

$('.ui-datepicker').on('click', 'a.ui-datepicker-month, a.ui-datepicker-year', function(e) {
  e.preventDefault();
  console.log("CLICK");
});

Note: 'a.ui-datepicker-month, a.ui-datepicker-year'. Also note the use of e, not event, as that will override the global event object that some browsers have.

*Update after question was edited:

There's two other issues. Firstly the correct classes are a.ui-datepicker-prev and a.ui-datepicker-next. Also, the ui.-datepicker element doesn't exist on load of the DOM, hence there's nothing to bind the event to. To fix this you can use $(document), although ideally you should use the nearest parent element to those you want to target thats in the DOM on load. Try this:

$(document).on('click', 'a.ui-datepicker-prev, a.ui-datepicker-next', function(e) {
  e.preventDefault();
  console.log("CLICK");
});

Working example

edited Mar 8, 2017 at 16:47

answered Mar 8, 2017 at 16:23

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ruth Young Over a year ago

Corrected the syntax. Still not logging to the console though.... @Rory McCrossan

Rory McCrossan Over a year ago

There's nothing specifically wrong with your code. The issue must lay with how the event is attached. Does the .ui-datepicker element exist when you execute the above code? As a test, try replacing $('.ui-datepicker') with $(document)

Rory McCrossan Over a year ago

Neither of the <a> elements in the edit have a class of ui-datepicker-month or ui-datepicker-year...?

Ruth Young Over a year ago

My mistake. I meant the next and prev links which are in the html: see edit above - sorry @Rory McCrossan

Rory McCrossan Over a year ago

It's because the .ui-datepicker class isn't in the DOM when the page loads. As I mentioned, if you use $(document) instead, it works: jsfiddle.net/2bvbheL1. The key here is that the element in the primary selector has to exist in the DOM when you attach the event handler.

|

Collectives™ on Stack Overflow

jQuery event handler with multiple links won't work

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related