Javascript Ember js-Jquery悬停效果在元素被Ember{{/if}隐藏并重新显示后停止工作

我希望我的jquery函数即使在包含该函数的元素被隐藏并使用{{if}}条件重新显示之后仍能工作

下面是停止工作的功能

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 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}}

如果使用isPublic切换这些图像，则视图中定义的两个图像的悬停效果将停止工作

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 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}}

---

关于如何解决这个问题有什么建议吗？

尝试将处理程序附加到{{if}}块上方的视图元素本身级别

App.RecordCategoriesView=Ember.View.extend{ didInsertElement:函数{ 此.onmouseover.isPublic函数{ $this.attr{src:images/makePublic blue.png}； }; //...

---

尝试在视图元素本身的级别将处理程序附加到{{if}}块之上

App.RecordCategoriesView=Ember.View.extend{ didInsertElement:函数{ 此.onmouseover.isPublic函数{ $this.attr{src:images/makePublic blue.png}； }; //... onDidInsertElement钩子仅在视图元素插入最顶层元素时才会激发。当重新呈现if表达式时，不会激发该钩子。在您的情况下，if块中的元素会从DOM中删除，并在必要时重新添加到DOM中。因此，重新显示后该钩子不起作用的原因是当前DOM元素不再是调用jQuery函数的DOM元素

有几种解决方法，但我要做的是让didInsertElement函数观察isPublic属性。另外，请确保稍后使用Em.run.later以确保DOM元素实际存在，并在函数运行时准备就绪。我在代码库中使用以下代码：

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

onDidInsertElement钩子仅在视图元素插入最顶层元素时才会激发。当重新呈现if表达式时，不会激发该钩子。在您的情况下，if块中的元素会从DOM中删除，并在必要时重新添加到DOM中。因此，重新显示后该钩子不起作用的原因是当前DOM元素不再是调用jQuery函数的DOM元素

有几种解决方法，但我要做的是让didInsertElement函数观察isPublic属性。另外，请确保稍后使用Em.run.later以确保DOM元素实际存在，并在函数运行时准备就绪。我在代码库中使用以下代码：

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

---

我没有足够的枣子来评论上面的内容，但下面是panta82的答案，并以coffeescript的形式展开，以供那些寻找相同答案的人使用，但以coffeescript的形式与我一样

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"

---

我没有足够的枣子来评论上面的内容，但下面是panta82的答案，并以coffeescript的形式展开，以供那些寻找相同答案的人使用，但以coffeescript的形式与我一样

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"

---

更改绑定事件的方式，使用“on”、“on”绑定到当前DOM中的元素，但它也绑定到实时插入的元素。问题是“if”语句没有添加隐藏html代码的类，如果检查html代码，当执行“else”时，html代码消失。嗯，我听说过这项工作我也用on更新了这个问题。请看这里“live”已被弃用，但它们为您提供了使用jquery版本所需的功能。同样的问题也会发生，只是这一次，如果整个页面重新加载，jquery都不会工作。这与您正在寻找的解决方案有点偏离主题，因为它在dr操作jquery的使用，但是如果你想用余烬的方式修复这个问题，你应该使用它将一个控制器属性绑定到src，然后在视图中侦听mouseEnter，mouseLeave事件。让视图向控制器发送一个操作，它可以为你更改绑定的属性。如果你对这个解决方案感兴趣，我可以提供一个更详细的示例更改绑定事件的方式，使用“on”、“on”绑定到当前DOM中的元素，但它也绑定到实时插入的元素。问题是“if”语句没有添加类来隐藏html代码，如果检查html代码，当执行“else”时，html代码会消失。嗯，我听说过这一点以前工作过，但我没有。我还使用on更新了问题。请看这里“live”已被弃用，但它们为您提供了使用jquery版本所需的功能。同样的问题也会发生，只是这次，如果整个页面重新加载，则没有jquery工作。这与您正在寻找的解决方案有点偏离主题它放弃了jquery的使用，但是如果你想用余烬的方式解决这个问题，你应该使用它将控制器属性绑定到src，然后在视图中侦听mouseEnter、mouseLeave事件。让视图向控制器发送一个操作，它可以为你更改绑定的属性。如果你对这个解决方案感兴趣，我可以提供更详细的信息这个回答提供了很多信息！我是否在bot中包装了我的每个悬停函数

---

h jqueryEvents和Em.run.later，然后将整个函数集包装到DidInsertElement？您不需要DidInsertElement函数。“didInsertElement”上的命令将确保每当触发didInsertElement事件时jqueryEvents都会运行。我最终使用Sarus的余烬条件方法来解决我的问题，但他只是将其作为注释而不是“答案”来写。你的解释帮助我了解了DOM中发生的事情。遗憾的是，我使用Ember的次数越多，我就越能看到它的缺陷，比如它不能很好地处理某些JQuery，以及它忽略了创建大型应用程序（如简单的筛选搜索栏）的一些关键元素。不管怎样，你的回答都是绿色的。谢谢余烬并不完美，但它确实是一个非常好的框架，具有很多特性。不幸的是，学习曲线非常陡峭。要理解事情为什么会这样做需要很长时间；但当你明白了，使用余烬变得非常容易。通常，像一些笨拙的渲染这样的奇怪决定背后的原因是由于性能。一句话：你最终会掌握窍门的。继续在这里询问您是否需要过滤器搜索栏之类的帮助。是的，余烬条件很方便，即使它们没有elsif语句。如果你想做一个简单的+50代表，我正在尝试让这个过滤器条示例与我的项目一起工作。这是一个非常有用的回答！我是否在jqueryEvents和Em.run.later中包装每个悬停函数，然后将整个函数集包装到DidInsertElement中？您不需要DidInsertElement函数。“didInsertElement”上的命令将确保每当触发didInsertElement事件时jqueryEvents都会运行。我最终使用Sarus的余烬条件方法来解决我的问题，但他只是将其作为注释而不是“答案”来写。你的解释帮助我了解了DOM中发生的事情。遗憾的是，我使用Ember的次数越多，我就越能看到它的缺陷，比如它不能很好地处理某些JQuery，以及它忽略了创建大型应用程序（如简单的筛选搜索栏）的一些关键元素。不管怎样，你的回答都是绿色的。谢谢余烬并不完美，但它确实是一个非常好的框架，具有很多特性。不幸的是，学习曲线非常陡峭。要理解事情为什么会这样做需要很长时间；但当你明白了，使用余烬变得非常容易。通常，像一些笨拙的渲染这样的奇怪决定背后的原因是由于性能。一句话：你最终会掌握窍门的。继续在这里询问您是否需要过滤器搜索栏之类的帮助。是的，余烬条件很方便，即使它们没有elsif语句。如果你想做一个简单的+50代表，我正在尝试让这个过滤器条示例与我的项目一起工作。在HTML中会是什么样子？和现在看起来一样。您只需从元素本身中删除处理程序，因此不必每次更改DOM时都添加/删除它。当然，您必须更改$this.attr。。。拍摄鼠标下方的元素。看。那在HTML中看起来怎么样？和现在看起来一样。您只需从元素本身中删除处理程序，因此不必每次更改DOM时都添加/删除它。当然，您必须更改$this.attr。。。拍摄鼠标下方的元素。看，欢迎来到StackOverflow；感谢您花时间发布您的代码！欢迎来到StackOverflow；感谢您花时间发布您的代码！