How to insert Jquery using Emberjs

Question

I’m building a web app with Ember.js (simple) and I’m trying to use some animation functions with Jquey, there goes the code:

require(['../js/bootstrap'], function () {
  require([
  	'jquery',
  	'handlebars',
  	'embertemplatecompiler',
  	'ember'
  ],function($){
App = Ember.Application.create({
	rootElement: '#forum'
});

//Ember Routes
App.Router.map(function() {
  this.resource('posts', {path:'/'}, function() {
  		this.resource(
        'post',
        { path: ':post_id'});
  });
});

App.PostsRoute = Ember.Route.extend({
	model: function(){
		return posts;
	}
});



 //Ember Model
var posts = [{
	id:'1',
	title:"O rato roeu a roupa",
	text:"Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis."
}, {
	id: '2',
	title:"O Hugo fujão",
	text: "Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis."
}, {
	id: '3',
	title:"Gabs Ligeiro",
	text: "Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis."
 }, {
 	id:'4',
 	title:"Leo Feliz",
 	text:"VIsh Maria, funciono bixo!"
}];

  });
});

/* Optimum Forum Css 
/* Discussões 
*/

.forum-discussions {
	background-color: #4E4E4E;
	min-height: 100vh;	
}

.option {
	padding-right: 1.2rem;
	padding-left: 1.2rem;
	background-color:#5A5858;
	margin-left: 45px;
	margin-top: 15px;
}

a.option:visited{
	background-color: #5A5858;
}

a.option:active{
	background-color: #DCDCDC;
}

.forum ul {
	list-style-type: none;
	margin-left: 0px;
}

.forum li {
	margin-left: 15px;
}

.forum-photo {
	background-color: #eee;
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 18px;
	margin-bottom: 10px;
	margin-top: -12px;
}

.forum a {
	color: #FFF;
	font-weight: bolder;
}

.forum a:hover {
	color:#DCDCDC;
}

.forum-divisor {
	background-color: #696969;
}

.forum-search {
	margin-left: 20px;
	margin-right: 20px;
	width: 93%;
}

.forum-events {
 display: none;	
}

/* teste de cores */
.cor1 {
	background-color: #fff;
}
.cor2 {
	background-color: #eeee;
}
.cor3{
	background-color: #CA2B2B;
}

<?php
    $this->extend('/Common/base');
?>
<?php echo $this->Html->css('Optimum./css/style.css'); ?>


<div class="row full-width" id="forum">
	<!--Forum Discussions / discussions (Ember)-->
	<script type="text/x-handlebars" id="posts">
	<div class="large-4 columns forum-discussions">
		<!-- Menu de funcionalidades -->
		<div class="row ">
			<div class="larger-2 columns">
				<a href="#" class="button round option" id ="category"><i class="fa fa-tag"></i></a>
				<a href="#" class="button round option" id="search"><i class="fa fa-search"></i></a>
				<a href="#" class="button round option" id="add"><i class="fa fa-plus"></i></a>
			</div>
			<!-- toggle effect begin-->
				<!-- category -->
				<div class="forum-search forum-events" id="categoria">
					<input type="text" placeholder="Insira uma categoria">
				</div>
				<!--search-->
				<div class="forum-search forum-events" id="find">
					<input type="text" placeholder="Buscar Discussão">
			    </div>
			    <!--add-->
			    <div class="forum-search forum-events" id="adicionar">
			    	<div class="row">
					    <div class="large-12 columns">
					      <div class="row collapse">
					        <div class="small-10 columns">
					          <input type="text" placeholder="Adicionar Discussão">
					        </div>
					        <div class="small-2 columns">
					          <a href="#" class="button postfix"><i class="fa fa-check"></i></a>
					        </div>
					      </div>
					    </div>
					  </div>
			    </div>
			<!-- end of toggle effect-->
			<hr class="forum-divisor">
		</div>
		<!-- Listagem de discussões -->
		<div class="row">
			<div class="large-12 forum">
				<ul>
				 {{#each}}
					<a href="#">
						<li class="active">
							<div class="larger-4 forum-photo">
							<!--photo-->
							</div>
							<div>
								{{#link-to 'post' this}}
					         {{title}}
					      {{/link-to}}
							</div>
						</li>
					</a>
					<hr class="forum-divisor">
					{{/each}}
				</ul>
			</div>
		</div>
	</div>
	{{outlet}}
	</script>
	<!-- Forum Posts / Posts (Ember) -->
	<script type="text/x-handlebars" id="post">
	<div class="large-8 columns" data-equalizer-watch>
		<h1>{{title}}</h1>
      <p>{{text}}</p>
	</div>
	</script>

</div>
<?php echo $this->Html->script('Optimum.toggle');?>
<?php  echo $this->Html->script('Optimum./js/app.js'); ?>

What I want to use with Jquery is this code:

require(['../js/bootstrap'], function () {
  require([
    'jquery'
  ],function(){

	$('#search').click( function(){
		$('#find').toggle("blind");
	});

	$('#category').click(function(){
		$('#categoria').toggle("blind");
	});

	$('#add').click(function(){
		$('#adicionar').toggle("blind");
	});
});

});

Answer 1

Fixing! To apply Jquery I should apply Document, follow the corrected File:

require(['../js/bootstrap'], function () {
  require([
    'jquery'
  ],function($){

	$(document).on('click', '#search', function(){
		$('#find').toggle("blind");
	});

	$(document).on('click','#category', function(){
		$('#categoria').toggle("blind");
	});

	$(document).on('click','#add', function(){
		$('#adicionar').toggle("blind");
	});
});

});