Why do coffeescript/jquery functions not trigger on DOM elements loaded via ajax, and how to fix?

Question

In a Rails 3.2 app I have a coffeescript function that toggles a css class when a link is clicked.

#coffeescript
jQuery ->
  $(".toggle-link").click ->
    $(this).toggleClass "selected"

#view
<%= link_to "toggle", my_path, class: "toggle-link" %>

This works fine.

But if I move the link into an ajaxified partial, e.g. for pagination, the jquery toggle stops working.

Why is this?

And how can it be fixed?

Denys Séguret · Accepted Answer · 2013-05-13 16:58:32Z

5

You need to use on for dynamic elements :

jQuery ->
  $(document).on 'click', ".toggle-link", ->
    $(this).toggleClass "selected"

(replace document with the container of your pages for better efficiency)

answered May 13, 2013 at 16:58

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

Comments

demee · Accepted Answer · 2013-05-13 17:00:15Z

0

Use jQuery delegate function istead of click. http://api.jquery.com/delegate/

$('#paren-element-id').delegate('.toggle-link', click', function yourCallback(){});

answered May 13, 2013 at 17:00

demee

5826 silver badges18 bronze badges