We Keep Coding

how to add and than remove eventlistener in JavaScript

new_line=function()
{
var conteiner=document.createElement('div');
conteiner.classList.add('conteiner');
conteiner.addEventListener('click', function (event){on_click(event, conteiner);}, false);//this is an anonymous function so it is always new
document.body.appendChild(conteiner);
create_el(conteiner);
};
I have this function and in it addEventListener. I know that when I'm giving: function (event){on_click(event, conteiner);} I can't remove this EventListener, but I need give on_click function second parameter.
delete_conteiner=function(which)
{
which.removeEventListener("click", function (event){on_click(event, conteiner);}, false);//this isn't working
document.body.removeChild(which);
};
Is it posible to add EventListener, which execute on_click, and than remove it in oder EventListener? Here full code:
(function()
{
var create_ul, user_names, menage_ul, open, look_for, save_as, user_name, real_name, on_click, set_up, create_el, show_hide_btn_click, delete_el, on_load, get_object_to_save, change_all, save, delete_conteiner, change_see_able, restart, new_line, new_cubes, scroll_with_ctrl;
create_el=function(where, options)
{
var configs=options || {
class_names:'textbox',
value:''
};
var block=document.createElement('textarea');
block.className=configs.class_names;
block.value=configs.value;
where.appendChild(block);
};
delete_el=function(where, which)
{
where.removeChild(which);
};
delete_conteiner=function(which)
{
which.removeEventListener("click", function(event){on_click(event, conteiner);}, false);//I know that won't work
document.body.removeChild(which);
};
change_see_able=function(where)
{
var is_see_able=true;
where.classList.forEach(function(str){
if(str=='none_see_able')
{
is_see_able=false;
}
});
if(is_see_able)
{
where.classList.add('none_see_able');
}
else
{
where.classList.remove('none_see_able');
}
};
on_click=function(ev, conteiner)
{
var is_box_cliked=false;
ev.target.classList.forEach(function(className){
if(className=='textbox')
{
is_box_cliked=true;
}
});
if(is_box_cliked)
{
if(ev.shiftKey)
{
if(!ev.ctrlKey)
{
if(!ev.altKey)
{
create_el(conteiner);
}
}
}
else if(ev.ctrlKey)
{
if(!ev.altKey)
{
delete_el(conteiner, ev.target);
}
}
else if(ev.altKey)
{
change_see_able(ev.target);
}
else
{}
}
else
{
if(ev.ctrlKey)
{
delete_conteiner(conteiner);
}
else
{
if((conteiner.querySelector('.textbox')==null) || ev.shiftKey)
{
create_el(conteiner);
}
}
}
};
get_object_to_save=function()
{
var conteiners=document.body.querySelectorAll('.conteiner'), conteiners_to_save=Array();
conteiners.forEach(function(textboxes){
var textboxes=textboxes.querySelectorAll('.textbox'), textboxes_to_save=Array();
textboxes.forEach(function(textbox){
var textbox_to_save={
class_names:textbox.className,
value:textbox.value
};
textboxes_to_save.push(textbox_to_save);
});
conteiners_to_save.push(textboxes_to_save);
});
return [user_name, JSON.stringify(conteiners_to_save)];
};
new_line=function()
{
var conteiner=document.createElement('div');
conteiner.classList.add('conteiner');
create_el(conteiner);
conteiner.addEventListener('click', function(event){on_click(event, conteiner);}, false);
document.body.appendChild(conteiner);
};
load=function(conteiners)
{
if(conteiners.length===0)
{
new_line();
}
else
{
conteiners.forEach(function(textboxes){
var conteiner=document.createElement('div');
conteiner.classList.add('conteiner');
conteiner.addEventListener('click', function(event){
on_click(event, conteiner);
}, false);
document.body.appendChild(conteiner);
textboxes.forEach(function(options_for_textbox){
create_el(conteiner, options_for_textbox);
});
});
}
}
save=function()
{
localStorage.setItem(real_name, JSON.stringify(get_object_to_save()));
};
look_for=function()
{
for(i=localStorage.length-1; i>=0; i--)
{
if(localStorage.key(i)!='name_last')
{
if(user_name===JSON.parse(localStorage.getItem(localStorage.key(i)))[0])
{
return [true, localStorage.key(i)];
}
}
}
user_names.push(user_name);
localStorage.setItem('names', JSON.stringify(user_names));
return [false, 'c_'+new Date().getTime()];
};
open=function()
{
if(document.querySelector('.buttons > .open > input').value!='')
{
var conteiners=document.querySelectorAll('.conteiner');
conteiners.forEach(function(conteiner)
{
delete_conteiner(conteiner);
});
user_name=document.querySelector('.buttons > .open > input').value;
document.querySelector('.buttons > .open > input').value='';
var is=look_for();
real_name=is[1];
localStorage.setItem('name_last', real_name);
if(!is[0])
{
localStorage.setItem(real_name, JSON.stringify([user_name, JSON.stringify(new Array())]));
}
conteiners=JSON.parse(JSON.parse(localStorage.getItem(real_name))[1]);
load(conteiners);
}
};
save_as=function()
{
if(document.querySelector('.buttons > .save_as > input').value!='')
{
user_name=document.querySelector('.buttons > .save_as > input').value;
document.querySelector('.buttons > .save_as > input').value='';
real_name=look_for();
localStorage.setItem('name_last', real_name);
localStorage.setItem(real_name, JSON.stringify(get_object_to_save()));
}
};
on_load=function()
{
var name=localStorage.getItem('name_last');
if(localStorage.length===0)
{
user_names=new Array();
localStorage.setItem('names', JSON.stringify(new Array()));
user_name='first';
real_name=look_for()[1];
localStorage.setItem('name_last', real_name);
localStorage.setItem(real_name, JSON.stringify([user_name, JSON.stringify(new Array())]));
}
else
{
real_name=name;
user_name=JSON.parse(localStorage.getItem(real_name))[0];
user_names=JSON.parse(localStorage.getItem('names'));
}
var conteiners=JSON.parse(JSON.parse(localStorage.getItem(real_name))[1]);
load(conteiners);
};
new_cubes=function()
{
var conteiners=document.querySelectorAll('.conteiner');
conteiners.forEach(function(conteiner){
create_el(conteiner);
});
};
restart=function()
{
var conteiners=document.querySelectorAll('.conteiner');
conteiners.forEach(function(conteiner){
delete_conteiner(conteiner);
});
new_line();
};
change_all=function()
{
var value=document.querySelector('.buttons > .to_all > textarea').value;
document.querySelector('.buttons > .to_all > textarea').value='';
var textboxes=document.querySelectorAll('.textbox');
textboxes.forEach(function(textbox){
textbox.value=value;
});
};
set_size=function()
{
//textareas in menu prepare for calculations
var textareas=document.querySelectorAll('label textarea');
textareas.forEach(function(textarea){
textarea.style.height='0px';
});
//inputs in menu prepare for calculations
var inputs=document.querySelectorAll('label input');
inputs.forEach(function(input){
input.style.height='0px';
});
//show_hide_btn prepare for calculations
var show_hide_btn=document.querySelector('.button.show_hide_menu');
show_hide_btn.style.height='0px';
//get height for textareas and inputs
var width=textareas[0].offsetWidth+'px';
var height=document.querySelector('.to_all .to_all').offsetHeight+'px';
var uls=document.querySelectorAll('label ul');
uls.forEach(function(ul){
ul.style.bottom=height;
});
//textareas set height
textareas.forEach(function(textarea){
textarea.style.height=height;
});
//inputs set height
inputs.forEach(function(input){
input.style.height=height;
input.style.width=width;
});
//show_hide_btn set height
show_hide_btn.style.height=document.querySelector('.buttons_place').offsetHeight+'px';
};
show_hide_btn_click=function(btn)
{
if(btn.style.transform==='')
{
document.querySelector('.buttons_place').style.transform='translateX('+document.querySelector('.buttons').offsetWidth+'px)'
btn.style.transform='rotateY(180deg)';
setTimeout(function()
{
btn.style.borderTopLeftRadius='0';
btn.style.borderBottomLeftRadius='0';
btn.style.borderTopRightRadius='10px';
btn.style.borderBottomRightRadius='10px';
}, 750);
}
else
{
document.querySelector('.buttons_place').style.transform='';
btn.style.transform='';
setTimeout(function()
{
btn.style.borderTopLeftRadius='';
btn.style.borderBottomLeftRadius='';
btn.style.borderTopRightRadius='';
btn.style.borderBottomRightRadius='';
}, 750);
}
};
ul_click=function(where, value)
{
where.querySelector('input').value=value;
};
create_ul=function(where, names_to_show)
{
var ul=where.querySelectorAll('ul');
if(ul!=null)
{
ul.forEach(function(ul_one_object)
{
where.removeChild(ul_one_object);
});
}
if(names_to_show.length!=0)
{
ul=document.createElement('ul');
names_to_show.forEach(function(name)
{
var li=document.createElement('li');
li.textContent=name;
ul.appendChild(li);
});
ul.addEventListener('click', function(ev){ul_click(where, ev.target.textContent);}, false);
ul.style.bottom=document.querySelector('.to_all .to_all').offsetHeight+'px';
where.appendChild(ul);
}
};
menage_ul=function(label, value)
{
var names_to_show=user_names.filter(function(name){
return name.indexOf(value)==0;
});
create_ul(label, names_to_show)
};
set_up=function()
{
var show_hide_btn=document.querySelector('.button.show_hide_menu');
show_hide_btn.addEventListener('click', function(event){show_hide_btn_click(show_hide_btn);}, false);
var width=document.body.offsetWidth;
setInterval(function()
{
if(width!=document.body.offsetWidth)
{
width=document.body.offsetWidth;
set_size();
}
}, 500);
set_size();
var add_new_line_btn=document.querySelector('.new_line');
add_new_line_btn.addEventListener('click', new_line, false);
var add_new_cubes_btn=document.querySelector('.new_cubes');
add_new_cubes_btn.addEventListener('click', new_cubes, false);
var restart_btn=document.querySelector('.restart');
restart_btn.addEventListener('click', restart, false);
var save_structure_btn=document.querySelector('.save');
save_structure_btn.addEventListener('click', save, false);
var to_all_btn=document.querySelector('.to_all .to_all');
to_all_btn.addEventListener('click', change_all, false);
var save_as_btn=document.querySelector('.save_as .save_as');
save_as_btn.addEventListener('click', save_as, false);
var open_btn=document.querySelector('.open .open');
open_btn.addEventListener('click', open, false);
var labels=document.querySelectorAll('label');
labels.forEach(function(label)
{
var input=label.querySelector('input');
if(input!=null)
{
input.addEventListener('keyup', function(ev){menage_ul(label, input.value);}, false);
}
});
on_load();
};
set_up();
})();

The removeEventListener() method removes an event handler that has been attached with the addEventListener() method.
Note: To remove event handlers, the function specified with the addEventListener() method must be an external function, like in the example below (click_event_func).
Anonymous functions, like "function (event){on_click(event, conteiner);}" will not work.
click_event_func = function(event) {
on_click(event, conteiner);
};
new_line = function() {
var conteiner = document.createElement('div');
conteiner.classList.add('conteiner');
conteiner.addEventListener('click', click_event_func, false);
document.body.appendChild(conteiner);
create_el(conteiner);
};
delete_conteiner = function(which) {
which.removeEventListener("click", click_event_func, false);
document.body.removeChild(which);
};

If you want to pass another param to an event listener you have to bind it to the function, as eventlistener will only pass the event itself (click event in your example). If you pass the exact same params and the same function when you remove it will remove it successfuly according to MDN.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

I think your problem is you don't use named functions.
Try to do like this:
function NameHere(event) { on_click(event, conteiner); }
new_line=function() {
var conteiner=document.createElement('div');
conteiner.classList.add('conteiner');
conteiner.addEventListener('click', NameHere, false);
document.body.appendChild(conteiner);
create_el(conteiner);
};
delete_conteiner=function(which) {
which.removeEventListener("click", NameHere, false);//this isn't working
document.body.removeChild(which);
};
The problem is when you try to remove the listener without using names, you will remove a different function from the one you added before.

By example:
which.removeEventListener("click", function (event){on_click(event, conteiner);}, false);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// This here creates a new function. It's not related to
// the function you created with addEventListener earlier.
// Trying to remove it from eventlisteners on "which" is silly
// because it doesn't exist there.
Instead:
var eventHandler = function(event){on_click(event, conteiner);}; // Store for later
conteiner.addEventListener('click', eventHandler); // Add.
conteiner.removeEventListener('click', eventHandler); // Remove.
You can remove eventListeners as long as you referencing the same function.

jQ Conditional handling of several separated events

Is there a way to handle separated events by one condition, without checking it in every event handler function? I.e. in the code listed below. Or maybe there is a way to do it more convinient? Any thoughts/suggestions?
var Obj = function(){
var self = this;
this.initialized = true;
$(document).on('click', function(){
if(self.initialized){
alert('hax!');
self.initialized = false;
}
})
$('input').on('mouseenter mouseleave', function(e){
if(self.initialized){
$(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
}
})
/*$('...').on(...) etc etc*/
}
var obj = new Obj()
.hovered{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Click me!'/>

i've played a bit around and maybe this is a working solution for you:
eventHandlerWrapper = function(state, callback) {
return function(e) {
if(state.initialized) {
return callback.bind(this, e)();
}
}
}
var Obj = function() {
this.initialized = true;
}
var obj = new Obj()
$(document).on('click', eventHandlerWrapper(obj, function(e){
obj.initialized = false;
}))
$('input').on('mouseenter mouseleave', eventHandlerWrapper(obj, function(e){
$(e.currentTarget).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
}))
I've also create a fiddle: https://jsfiddle.net/jz17L7h6/

Can you add another class for your button?
var Obj = function(){
var self = this;
self.initialized = true;
self.dom = $('<input>').attr('type', 'button').val('Click me!')
.data('obj', this)
.appendTo($('.container'));
/*$('...').on(...) etc etc*/
}
$(document)
.on('click', 'input:not(.uninitialized)', function(){
alert('hax!');
$(this).addClass('uninitialized')
.data('obj').initialized = false;
})
.on('mouseenter mouseleave', 'input:not(.uninitialized)', function(e){
$(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
});
for (var i = 0; i < 5; i++) {
new Obj();
}
https://jsfiddle.net/chukanov/fzez5th2/3/
If you can't add a class, you can turn off your listeners
var Obj = function(){
var self = this;
self.initialized = true;
self.dom = $('<input>').attr('type', 'button').val('Click me!')
.appendTo($('.container'));
var moveHandler = function(e){
$(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
};
var clickHandler = function(){
alert('hax!');
self.initialized = false;
self.dom
.off('mouseenter mouseleave', moveHandler)
.off('click', clickHandler);
};
self.dom
.on('mouseenter mouseleave', moveHandler)
.on('click', clickHandler);
/*$('...').on(...) etc etc*/
}
for (var i = 0; i < 5; i++) {
new Obj();
}
https://jsfiddle.net/chukanov/fzez5th2/4/
Or you can override your handlers
var Obj = function(){
var self = this;
self.initialized = true;
self.dom = $('<input>').attr('type', 'button').val('Click me!')
.appendTo($('.container'));
self.moveHandler = function(e){
$(this).attr('class', e.type == 'mouseenter' ? 'hovered' : '');
};
self.clickHandler = function(e){
alert('hax!');
self.initialized = false;
self.clickHandler = function (e) {};
self.moveHandler = function (e) {};
};
self.dom
.on('mouseenter mouseleave', function (e) { self.moveHandler.apply(this, arguments); })
.on('click', function (e) { self.clickHandler(e); });
/*$('...').on(...) etc etc*/
}
for (var i = 0; i < 5; i++) {
new Obj();
}
https://jsfiddle.net/chukanov/fzez5th2/5/
Update
I think you need to separate mouse events handlers.
var Obj = function(){
var self = this;
self.initialized = true;
self.dom = $('<input>').attr('type', 'button').val('Click me!')
.appendTo($('.container'));
var handlers = {
mouseenter: function (e) {
$(this).addClass('hovered');
},
mouseleave: function (e) {
$(this).removeClass('hovered');
}
}
var moveHandler = function(e){
handlers[e.type].apply(this, arguments);
};
var clickHandler = function(e){
alert('hax!');
self.initialized = false;
clickHandler = function (e) {};
moveHandler = function (e) {};
};
self.dom
.on('mouseenter mouseleave', function (e) {
moveHandler.apply(this, arguments);
})
.on('click', function (e) {
clickHandler(e);
});
/*$('...').on(...) etc etc*/
}
for (var i = 0; i < 5; i++) {
new Obj();
}
https://jsfiddle.net/chukanov/fzez5th2/7/

JavaScript removeEventListener won't work

I have a simple drag / drop script that I am playing around with to learn.. to try the code, just have an element with id "TEST" on a page and place the script on the page.
The element will begin dragging, and when you mouse up it seems like the removeEventListener doesn't seem to be working. I've been messing with it for 2 hours please help! Is there any obvious reason that it is not working? here is the script:
var Example = function() {
var exa = this;
this.elem = null;
this.init = function() {
exa.elem = document.getElementById('TEST');
console.log('exa.init()');
exa.attachEvent(exa.elem, 'mousedown', function(event) {
console.log('mousedown');
exa.drag.anchor(event);
});
}
this.attachEvent = function ( object, event, handler ) {
if (window.attachEvent) {
object.attachEvent( 'on'+event, function() {
handler.apply(object, arguments);
}, false );
} else {
object.addEventListener( event, function() {
handler.apply(object, arguments);
}, false );
}
}
this.detachEvent = function( object, event, handler ){
if (window.detachEvent) {
object.detachEvent( 'on'+event, function(){
handler.apply(object, arguments);
}, false ) ;
} else {
object.removeEventListener( event, function() {
handler.apply(object, arguments);
}, false );
}
}
this.drag = {
'release' : function(event) {
exa.elem.removeEventListener('mousemove', function(event) { exa.drag.move(event) }, true);
console.log('drag.release2');
},
'anchor' : function(event){
console.log('exa.drag.anchor();');
offY= event.clientY-parseInt(exa.elem.offsetTop);
offX= event.clientX-parseInt(exa.elem.offsetLeft);
exa.attachEvent(window, 'mousemove', function(event) {
exa.drag.move(event);
});
},
'move' : function(event) {
exa.elem.style.position = 'absolute';
var topPosition = (event.clientY-offY);
var leftPosition = (event.clientX-offX);
exa.elem.style.top = topPosition+ 'px';
exa.elem.style.left = leftPosition + 'px';
//console.log('FROM THE TOP: ' + topPosition);
//console.log('FROM THE LEFT: ' + leftPosition);
exa.attachEvent(window, 'mouseup', function(event) {
exa.drag.release(event);
});
}
}
}
var example = new Example();
example.attachEvent(window, 'load', function(event) {
example.init(event);
});
Sorry about that, the code I posted had confusing names for the functions and a couple mistakes, please look at the following:
var Example = function() {
var exa = this;
this.elem = null;
this.init = function() {
exa.elem = document.getElementById('TEST');
console.log('exa.init()');
exa.newEvent(exa.elem, 'mousedown', function(event) {
console.log('mousedown');
exa.drag.anchor(event);
});
}
this.newEvent = function ( object, event, handler ) {
if (window.attachEvent) {
object.attachEvent( 'on'+event, function() {
handler.apply(object, arguments);
}, false );
} else {
object.addEventListener( event, function() {
handler.apply(object, arguments);
}, false );
}
}
this.removeEvent = function( object, event, handler ){
if (window.detachEvent) {
object.detachEvent( 'on'+event, function(){
handler.apply(object, arguments);
}, false ) ;
} else {
object.removeEventListener( event, function() {
handler.apply(object, arguments);
}, false );
}
}
this.drag = {
'release' : function(event) {
exa.removeEvent(exa.elem, 'mousemove', exa.drag.move);
console.log('drag.release2');
},
'anchor' : function(event){
console.log('exa.drag.anchor();');
offY= event.clientY-parseInt(exa.elem.offsetTop);
offX= event.clientX-parseInt(exa.elem.offsetLeft);
exa.newEvent(window, 'mousemove', function(event) {
exa.drag.move(event);
});
},
'move' : function(event) {
exa.elem.style.position = 'absolute';
var topPosition = (event.clientY-offY);
var leftPosition = (event.clientX-offX);
exa.elem.style.top = topPosition+ 'px';
exa.elem.style.left = leftPosition + 'px';
exa.newEvent(window, 'mouseup', function(event) {
exa.drag.release(event);
});
}
}
}
var example = new Example();
example.newEvent(window, 'load', function(event) {
example.init(event);
});

You need a variable that refers to first function (callback passed to addEventListener), each time when you passing function with body as argument to removeEventListener, new function is created
var callback = function()
{
alert(1);
}
button.addEventListener('click', callback);
button.removeEventListener('click', callback);

JS Drag and drop with DOM

With this tutorial i made simple drag and drop web app. But I cant do it with DOM. Here is my code jsfinddle . It is not working on jsfiddle but if u download it it will. The script should be placed behind the divs. When you uncoment <div class="column" draggable="true"><span>A</span></div> it will work (not in jsfiddle). So how can i made it with DOM ?

Going off the assumption you meant doing the draggable with dynamically created elements, I've updated your jsfiddle. http://jsfiddle.net/7c3v0s1s/6/ I wrapped the code in a namespace while doing the changes.
HTML
<div class="containter">
<div id="columns"></div>
</div>
Javascript
var localNameSpace = {
dragSrcEl: null
, bindDraggables: function() {
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', localNameSpace.handleDragStart, false);
col.addEventListener('dragenter', localNameSpace.handleDragEnter, false);
col.addEventListener('dragover', localNameSpace.handleDragOver, false);
col.addEventListener('dragleave', localNameSpace.handleDragLeave, false);
col.addEventListener('drop', localNameSpace.handleDrop, false);
col.addEventListener('dragend', localNameSpace.handleDragEnd, false);
});
}
, createDraggables: function() {
var colDiv = document.getElementById('columns');
var divC = document.createElement('div');
var spanC = document.createElement('span');
divC.className = 'column';
divC.draggable = 'true';
spanC.innerHTML = 'A';
divC.appendChild(spanC);
colDiv.appendChild(divC);
}
, handleDrop: function(e) {
if(e.stopPropagation){
e.stopPropagation();
}
if(dragSrcEl != this){
localNameSpace.dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
, handleDragEnd: function(e) {
var cols = document.querySelectorAll('#columns .column');
this.style.opacity = 1;
[].forEach.call(cols, function(col){
col.classList.remove('over');
});
}
, handleDragEnter: function(e) {
this.classList.add('over');
}
, handleDragLeave: function(e) {
this.classList.remove('over');
}
, handleDragOver: function(e) {
if(e.preventDefault){
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
, handleDragStart: function(e) {
this.style.opacity = 0.4;
localNameSpace.dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
, init: function() {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
localNameSpace.createDraggables();
localNameSpace.bindDraggables();
}
}, 10);
}
};
localNameSpace.init();

jQuery search toggle

on my website I have a div .toggle-search that if you click on it it expands to .search-expand where a search form is. This is the code in jQuery
/* Toggle header search
/* ------------------------------------ */
$('.toggle-search').click(function(){
$('.toggle-search').toggleClass('active');
$('.search-expand').fadeToggle(250);
setTimeout(function(){
$('.search-expand input').focus();
}, 300);
});
Now the only way to close the .search-expand is to click once again on the .toggle-search. But I want to change that it closes if you click anywhere else on the site. For an easier example I have the Hueman theme, and I'm talking about the top right corner search option. http://demo.alxmedia.se/hueman/
Thanks!

Add the event on all elements except the search area.
$('body *:not(".search-expand")').click(function(){
$('.toggle-search').removeClass('active');
$('.search-expand').fadeOut(250);
});
or another way,
$('body').click(function(e){
if(e.target.className.indexOf('search-expand') < 0){
$('.toggle-search').removeClass('active');
$('.search-expand').fadeOut(250);
}
});

var isSearchFieldOpen = false;
var $toggleSearch = $('.toggle-search');
var $searchExpand = $('.search-expand');
function toggleSearch() {
// Reverse state
isSearchFieldOpen = !isSearchFieldOpen;
$toggleSearch.toggleClass('active');
// You can use callback function instead of using setTimeout
$searchExpand.fadeToggle(250, function() {
if (isSearchFieldOpen) {
$searchExpand.find('input').focus();
}
});
}
$toggleSearch.on('click', function(e) {
e.stopPropagation();
toggleSearch();
});
$(document.body).on('click', function(e) {
if (isSearchFieldOpen) {
var target = e.target;
// Checking if user clicks outside .search-expand
if (!$searchExpand.is(target) && !$searchExpand.has(target).length) {
toggleSearch();
}
}
});
I have a second search on the site with the same code as before only
with div .toggle-serach2 and .expand-search2, how can i make your code
so it wont overlap. just changing the name to $('toggle-search2')
doesn't cut it
in that case, I would suggest you convert your code into a plugin:
(function($, document) {
var bodyHandlerAttached = false;
var openedForms = [];
var instances = {};
var defaults = {
activeClass: 'active'
};
function ToggleSearch(elem, options) {
this.options = $.extend({}, defaults, options);
this.$elem = $(elem);
this.$btn = $(options.toggleBtn);
this.isOpen = false;
this.id = generateId();
this.bindEvents();
instances[this.id] = this;
if (!bodyHandlerAttached) {
handleOutsideClick();
bodyHandlerAttached = true;
}
}
ToggleSearch.prototype = {
bindEvents: function() {
this.$btn.on('click', $.proxy(toggleHandler, this));
},
open: function() {
if (this.isOpen) { return; }
var _this = this;
this.$btn.addClass(this.options.activeClass);
this.$elem.fadeIn(250, function() {
_this.$elem.find('input').focus();
});
openedForms.push(this.id);
this.isOpen = true;
},
close: function(instantly) {
if (!this.isOpen) { return; }
this.$btn.removeClass(this.options.activeClass);
if (instantly) {
this.$elem.hide();
} else {
this.$elem.fadeOut(250);
}
openedForms.splice(openedForms.indexOf(this.id), 1);
this.isOpen = false;
},
toggle: function() {
if (this.isOpen) {
this.close();
} else {
this.open();
}
}
};
var toggleHandler = function(ev) {
ev.stopPropagation();
this.toggle();
};
var handleOutsideClick = function(e) {
$(document.body).on('click', function(e) {
if (openedForms.length) {
var target = e.target;
var instance;
for (var id in instances) {
instance = instances[id];
if (!instance.$elem.is(target) && !instance.$elem.has(target).length) {
instance.close(true);
}
}
}
});
};
function generateId() {
return Math.random().toString(36).substr(2, 8);
}
$.fn.toggleSearch = function(options) {
return this.each(function() {
if (!$.data(this, 'toggleSearch')) {
$.data(this, 'toggleSearch', new ToggleSearch(this, options));
}
});
};
})(window.jQuery, document);
And then use it like this:
$('.search-expand').toggleSearch({
toggleBtn: '.toggle-search'
});
$('.search-expand2').toggleSearch({
toggleBtn: '.toggle-search2'
});
JSFiddle example

You could add a click handler to the main window that removes the active class:
$(window).click(function(){
$('.toggle-search').removeClass('active');
}
and then prevent the class removal when you click inside of your toggle-search elem
$('.toggle-search').click(function(e){
e.stopPropagation();
// remainder of click code here
)};

Try to add body click listener
$('body').click(function(e){
if ($(e.target).is('.toggle-search')) return;
$('.toggle-search').removeClass('active');
$('.search-expand').fadeOut(250);
});