Ember Js - Jquery Hover Effects Stop Working After Element Is Hidden And Redisplayed By Ember {{/if}} Conditional

I want my jquery function to still work even after the element with the function is hidden and reshown using {{#if}} conditionals. Below is the function that ceases to work. App.Re

Solution 1:

Try to attach the handlers above the {{if}} blocks, at the level of the view element itself.

App.RecordCategoriesView = Ember.View.extend({
   didInsertElement: function() {
    this.$().on("mouseover", ".isPublic", function () {
      $(this).attr({src: "images/makePublic-blue.png"});
    });
    //...

Solution 2:

I don't have enough jujubes to comment above, but here is panta82's answer expanded and in coffeescript (for those looking for the same answer, but in coffeescript like I was)

RecordCategoriesView = Ember.View.extend
    didInsertElement: ->
        @$().on "mouseover", ".isPublic", ->
            $(".isPublic").attr "src", "images/makePublic-blue.png"@$().on "mouseout", ".isPublic", ->
            $(".isPublic").attr "src", "images/makePublic-grey.png"@$().on "mouseover", ".isPrivate", ->
            $(".isPrivate").attr "src", "images/makePrivate-blue.png"@$().on "mouseout", ".isPrivate", ->
            $(".isPrivate").attr "src", "images/makePrivate-grey.png"

Solution 3:

The onDidInsertElement hook only fires when the view element is inserted (the topmost element). When an if expression is re-rendered, it's not fired. And in your case, the elements in the if block are deleted from the DOM and re-added to it when necessary. So the reason it's not working after being re-displayed is because the current DOM element is no longer the DOM element that you called the jQuery function on.

There's several workarounds, but what I would do is have the didInsertElement function observe the isPublic property. Also, make sure to use Em.run.later to ensure the DOM elements actually exist and are ready when the function runs. I use the code below in my codebase:

jqueryEvents: function() {
    Em.run.later(function() {
        this.$('.isPublic').on('mouseover', function() { ... });
    }.bind(this));
}.on('didInsertElement').observes('isPublic')