Calling A Jquery Event After The Page Transitions

For instance, transitioning from /application to /application/faq, $('.object').show(); is set off when /application loaded, but it doesn't go off again when I transition to appli

Solution 1:

Here's an example that uses jQuery to show/hide an alert as different transitions occur. Click on "Run code snippet" to see the example. Click on the A, B, and C links to transition to those routes and see the jquery animation.

varApp = Ember.Application.create();

App.Router.map(function() {
  this.resource('a');
  this.resource('b');
  this.resource('c');
});

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    willTransition: function() {
      Ember.$('.alert').fadeOut(200);
    },
    didTransition: function() {
      Ember.$('.alert').fadeIn(200);
    }
  }
});

.active {
  border: 2px#888 solid !important;
  padding: 2px2px3px2px;
}
#main {
  margin: 1em;
}
.alert {
  margin-top: 1em;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://builds.emberjs.com/handlebars-1.0.0.js"></script><scriptsrc="http://builds.emberjs.com/ember-latest.js"></script><linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><scripttype="text/x-handlebars"id="application">
  <div id="main">
    {{#link-to 'a'}}<span class="label label-default">A</span>{{/link-to}} {{#link-to 'b'}}<span class="label label-default">B</span>{{/link-to}} {{#link-to 'c'}}<span class="label label-default">C</span>{{/link-to}} {{outlet}}
    <div class="alert alert-success">Success!</div>
  </div>
</script>