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.RecordCategoriesView = Ember.View.extend({
   didInsertElement: function() {
    $(".isPublic").on( 'mouseover', function(){
      $(this).attr({src: "images/makePublic-blue.png"});
    });
    $(".isPublic").on( 'mouseout',function(){
      $(this).attr({src: "images/makePublic-grey.png"});
    });

    $(".isPrivate").on( 'mouseover', function(){
      $(this).attr({src: "images/makePrivate-blue.png"});
    });
    $(".isPrivate").on( 'mouseout', function(){
      $(this).attr({src: "images/makePrivate-grey.png"});
    });
      Ember.run.scheduleOnce('afterRender', this, this._childViewsRendered);
    }, 

  _childViewsRendered: function() {
    // here your child views is in the rendered state
  },
})

If these images are toggled with isPublic, the hover effects of two images defined in the views ceases to work.

    {{#if isPublic}}
    <a class="tooltipping float-right">
      <span>Shown to Public</span>
      <img class="table-img isPublic float-right" {{action "makePrivate" this bubbles=false}} src="images/makePublic-grey.png" />
    </a>
    {{else}}
      <a class="tooltipping float-right">
        <span>Hidden from Public</span>
        <img class="table-img isPrivate float-right" {{action "makePublic" this bubbles=false}} src="images/makePrivate-grey.png" />
      </a>
    {{/if}}

Any suggestions on how to remedy this?

回答1:

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')

回答2:

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"});
    });
    //...

回答3:

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"

来源：https://stackoverflow.com/questions/22717499/ember-js-jquery-hover-effects-stop-working-after-element-is-hidden-and-redispl

标签

javascript

jquery

html

css

ember.js