Click on button with jQuery doesn't have action

Question

I'm stuck with an button, and can't understand why it isn't work.

$('#full-london').on('click', () => {
weatherPage.render('London');
});

'#full-london' is id of my button

weatherPage.render starts some jQuery code witch change my front page. This is tested in other case and it work correct.

This is the button:

<a id="full-london" class="btn btn-dark">Full forecast</a>

Any idea what is wrong?

Here is additional situation with search button who uses weatherPage.render and it work:

$('#search-city-button').on('click', () => {
    const searchString = $('#search-city-input').val();
    weatherPage.render(searchString);
});

searchString is search input

 <div id="search">
      <input type="text" id="search-city-input">
      <a id="search-city-button" class="btn btn-danger">Search</a>
 </div>

Here is what is weatherPage.render(); do https://pastebin.com/PLgrrYQ0

`#full-london` is id of my button ??? and there are no buttons — mplungjan, Mar 20 '19 at 18:20
Also IF you are using a link, add a href and a preventDefault or you will not have the pointer. Why not use an actual button type="button" instead. It helps the people with screen readers too — mplungjan, Mar 20 '19 at 18:21
You likely have more than one `id="button-favorite" ` which is not allowed. IDs have to be unique. Use a class and data-attribute — mplungjan, Mar 20 '19 at 18:22
Nope, console is clear. I copy the wrong line, and edited first post - Full forecast — Martin Hristov, Mar 20 '19 at 18:30
I guess that `weatherPage.render()` dynamically creates some elements... — Louys Patrice Bessette, Mar 20 '19 at 18:38
@LouysPatriceBessette yes here what it does https://pastebin.com/PLgrrYQ0 But it work for search... If i type London in input menu have date for London - searchString. But if I use directly weatherPage.render('London') - not ... — Martin Hristov, Mar 20 '19 at 18:43
can you log anything to console when you click the button, is the click handler working? — fila90, Mar 20 '19 at 18:46
on the other hand, your question is bit vague. you have jQuery that adds click event on `#button-favorite` and a button with `id="full-sofia"`. that won't work because clicking on button doesn't have any event handler. oh, and you also mention that `#full-london` is the id of your button :/ — fila90, Mar 20 '19 at 18:48
What is the HTML generated by `$(config.selectors.grid).html('');` i.e. what is that selector when rendered? can you show the HTML associated with that? — Mark Schultheiss, Mar 20 '19 at 19:08
@fila90 sorry I copy info for second button it's #full-london at the bot places. I edited the post. — Martin Hristov, Mar 20 '19 at 19:10
@MarkSchultheiss here is the html https://pastebin.com/CT2rB3z7 fornt page ids changed with this https://pastebin.com/5S8eSspC When use weatherPage.render() I clear all html who forntPage.js module set with $(config.selectors.grid).html(''); This work ok when use search button. — Martin Hristov, Mar 20 '19 at 19:15
@MartinHristov and you can confirm that event listener is working properly? — fila90, Mar 21 '19 at 00:02
@MartinHristov no no, if you put this `$('#full-london').on('click', () => {console.log('LONDON')})` in your code, will it work? do you get `LONDON` in your console? — fila90, Mar 21 '19 at 10:37
@fila90 nope... But if I put console.log() in $('#search-city-button').on('click', () => {console.log('London')}); it work... — Martin Hristov, Mar 21 '19 at 13:26
@fila90 I make another test. If i put button directly in index.html, like search button is - it work. But if I put button with JS module - it doesn't work... WTF>?! — Martin Hristov, Mar 21 '19 at 13:28
`$(document).on('click', '#full-london', () => { weatherPage.render('London'); });` - or better yet wrap in an element and attach to that - where and when the event handler is attached is key. See here for details https://stackoverflow.com/a/9929631/125981 — Mark Schultheiss, Mar 22 '19 at 12:23

score -2 · Accepted Answer · answered Mar 21 '19 at 15:45

-2

that makes perfect sense!!

you're adding your button dynamically, so when JS is parsing $('#full-london').on('click',... at that time there's no button on the page, so it can't attach the event to it.

function setEvents() {
  $('#full-london').on('click', () => {
    weatherPage.render('London');
  });
}

make a function inside of your JS module (like setEvents) and call that function AFTER you add button to the page.

answered Mar 21 '19 at 15:45

fila90

1,439
11
11

No, he needs to delegate – mplungjan Mar 22 '19 at 06:22

Click on button with jQuery doesn't have action

1 Answers1