Why isn't my click trigger event firing? (resolved)

I am working on my Random Quote Generator. After spending a lot of time being confused about JSON and ajax and wondering why I couldn’t get anything to work I decided to take it small steps at a time. So I have a button that I want to trigger the event of generating a random quote, but I decided first to make sure that the click event was doing anything by just inserting a static message when the button is clicked. This is exactly what we did in one of the exercises of the last section, and I’ve checked my code carefully against that code so I don’t have any clue why nothing is happening when the button is clicked!

link to pen: http://codepen.io/earata15/pen/YpzyjW

Right now you don’t have any click events bound.

Additionally, you are passing a function into document.ready() … which is … not efffective.

You need to execute the function inside of document ready. RIght now the document ready callback isn’t doing anything.

$( document ).ready( function(){

   // EXECUTE YOUR CODE HERE
   func();

});

That still won’t do anything when a button is clicked, but it should run the function on page load.

EDIT: On second look, it’s completely obvious that passing in the function should of course work (doh! on my part). I’m just not used to seeing it that way. :slight_smile: I’ll have another look …

EDIT EDIT: Oh … you don’t have jQuery defined for the page. You need to add that script tag. Click the gear icon on the JS pane and add it there.

1 Like

Thank you! I was so frustrated earlier I was doing all kinds of things that I saw people suggesting online, including defining the function ahead of time. Also I forgot when I posted this that I took out the click event to see if it just wasn’t running at all. Of course the problem was that I was missing the JQuery script tag… hours of pain for such a simple fix… sigh. Thank you for the help!!

You’re welcome! Glad I could help and that it was such a simple fix.

Defining things ahead of time and outside of the document ready function is generally good advice - it’s very hard to re-use your code elsewhere if it isn’t in an external .js file. But I was more used to seeing the format I posted above and wasn’t thinking right. :slight_smile:

1 Like

That last bit of advice really helped. I felt like I was going to pull my hair out.

Thanks!