jQuery not detecting link on click

Question

This is a rails 4.2 project using HAML

I'm looking to have a clickable image to trigger some functionality on click. I need to have accessible the image source.

rails view

- @gallery.pictures.each do |picture|
  = link_to image_tag(picture.image.url, class: 'thumb'), "#", class: "gallery_image"

JavaScript / jQuery

  $('.gallery_image').on('click', function() {
    event.preventDefault()
    console.log('This is a clickable image')

    // do something
  })

Right now, it works fine as a link. It redirects to, well... "#", but the console never shows this is a clickable image.

I know the javascript is accessed because if I add a typo, Google Chrome console immediately yells.

Any thoughts?

Thanks!

Roko C. Buljan · Accepted Answer · 2016-04-24 19:57:53Z

1

Wrap your jQuery into a DOM ready function
Use the event argument
Assign the click to your child .thumb

jQuery(function($) { // DOM ready and $ alias in scope

  $('.gallery_image').on('click', '.thumb', function(event) {
    event.preventDefault();
    console.log('This is a clickable image');

    // do something
  });

  // other DOM dependent code here

});

answered Apr 24, 2016 at 19:57

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Collectives™ on Stack Overflow

jQuery not detecting link on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related