We Keep Coding

I can't get hover or mouseenter to unbind and rebind again

I have tried sooooo many different methods of this that others have suggested, but I don't understand what i'm doing wrong and really need some help. I have tried using various combinations of hover, mouseenter/mouseleave, on/off, bind/unbind.
Basically, I can get things to unbind, but I can't get them to bind again afterwards.
I put together a jsfiddle with a basic example. If you click the "Hover Off" button, mouseenter is disabled like intended. But then if you click the "Hover On" button after, mouseenter does not enable again.
http://jsfiddle.net/770b5p8q/3/
Here is "hover" functionality:
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
Here is what should enable/disable it:
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter");
$(this).bind("mouseleave");
});
});
$('.hover_disabled').click(function(){
$('.square').each(function(){
$(this).unbind("mouseenter");
$(this).unbind("mouseleave");
});
});

You should pass the function for binding and unbinding the handlers, something like:
var mouseEnterHandler = function () {
$(this).addClass('active');
}
var mouseLeaveHandler = function () {
$(this).removeClass('active');
};
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
$('.hover_enabled').click(function () {
$(this).addClass('active');
$('.hover_disabled').removeClass('active');
// I need to bind hover here
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
});
But the code becomes ugly and unmaintainable. You can use event delegation instead:
$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
// toggle the class by checking the type of the event
$(this).toggleClass('active', event.type === 'mouseenter');
});
// caching the state changers
var $e = $('.hover_enabled, .hover_disabled').click(function () {
var $this = $(this).addClass('active'),
isHoverable = $this.hasClass('hover_enabled');
// exclude the clicked element from the set and remove the class
$e.not($this).removeClass('active');
$('.square').toggleClass('hoverable', isHoverable);
});
The above mouseenter mouseleave handler is only executed when the .square element has hoverable className. You can also remove the event handler and use CSS for styling.
.square.hoverable:hover {
}
http://jsfiddle.net/bztec1f4/

Once you rebind it back you need to pass function as well.
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
});

Run javascript on btn but not container

I've got this:
http://jsfiddle.net/G3VjC/
which is simply:
$(document).ready(function() {
$(document).on('click','#btn',function(){
console.log('ran btn');
});
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
});
But when clicking the button is run the btn JS and the container JS (see console log).
How can I separate them?
thanks

use stopPropagation()
$(document).on('click','.meee',function(e){ // add event as argument
console.log('ran btn');
e.stopPropagation()
});

Try this
$(document).ready(function() {
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
$(document).on('click','.meee',function(){
console.log('ran btn');
return false;
});
});
Demo

Or try this:
$(document).ready(function() {
$('#containerdiv').click(function(){
console.log('ran div');
});
$('.meee').click(function(e){
e.stopPropagation();
console.log('ran btn');
});
});
As chumkiu already said, just use stopPropagation()

$(document).on('click','#btn',function(e){
e.stoppropagation();
var target = $(e.target);
if(!target.attr('id') == 'btn'){
e.preventDefault();
$(target.find("#btn)).trigger("click")
}
//any additional logic if the target was of the intended type.
});

How to fetch data and Trigger function from textbox using jquery?

<input id = "textboxid" type="text" onkeyup="invoke();" />
<script>
function invoke() {
var enteredData = $('#textboxid').val();
alert(enteredData);
}
</script>
This is working fine but i want to do it without using onkey attribute and only jquery

Try this
$(document).ready(function(){
$("#textboxid").keyup(function() {
alert($(this).val());
});
});
Hope it will help

Use the keyup jQuery event:
HTML
<input id = "textboxid" type="text" />
Javascript
$(function() {
$("#textboxid").on("keyup", function() {
alert($(this).val());
});
});

Check the JS Fiddle
http://jsfiddle.net/juGyc/
$(function() {
$("#textboxid").on("keyup", function() {
alert($(this).val());
});
});

can you please check this demo Demo
$(document).ready(function(){
$("#textboxid").keyup(function() {
alert($(this).val());
});
});
KeyUp : Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

This will work for on Change or Blur
$("#textboxid").change(function(){
alert($(this).val());
});
blur Event

You can do this using jQuery's .bind() method. Check out the jsFiddle.
$(document).ready(function(){
$("#myTextBox").bind("change paste keyup", function() {
alert($(this).val());
});
});
OR
You can also bind events using jquery .On() -
$(document).ready(function(){
$("#textboxid").on("change paste keyup", function() {
alert($(this).val());
});
});
Try This
OR
Also bind the .change() event-
$(document).ready(function(){
$("#textboxid").change(function() {
alert($(this).val());
});
});

Two listeners on one element: let only one fire

In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? JSFiddle.
$("#buttons").on("click", "button", function(){
// only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
// if this one happens, don't do the above one
});

For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use e.stopPropagation():
$(document).ready(function(){
$("#buttons").on("click", ".red", function(e){
e.stopImmediatePropagation();
$(this).css("color","red");
});
$("#buttons").on("click", "button", function(){
$(this).css("background","blue");
});
});
http://jsfiddle.net/Ef5p7/
Here's how you could use stopPropagation() instead:
<div id="buttonsOuter">
<div id="buttons">
<button>turn blue</button>
<button class="red">only turn text red</button>
<button>turn blue</button>
<button>turn blue</button>
<button>turn blue</button>
</div>
</div>
...
$(document).ready(function () {
$("#buttons").on("click", ".red", function (e) {
e.stopPropagation();
$(this).css("color", "red");
});
$("#buttonsOuter").on("click", "button", function () {
$(this).css("background", "blue");
});
});
http://jsfiddle.net/CwUz3/

Change the first event handler to:
$("#buttons").on("click", "button", function(){
$(this).not('.red').css("background","blue");
});
jsFiddle example

$("#buttons").on("click", "button, button.red", function(){
// if this one happens, don't do the above one
});

Try using :not() http://api.jquery.com/not-selector/
$(document).ready(function(){
$("#buttons").on("click", "button:not(.red)", function(){
$(this).css("background","blue");
});
$("#buttons").on("click", "button.red", function(){
$(this).css("color","red");
});
});
Here's the working fiddle:
http://jsfiddle.net/SpFKp/4/

Try this,the functions will be called but you can add condition to not run the code:
var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
if(!functionCalledFlag ){
functionCalledFlag =true;
// only do this if the event below isn't fired
}else{
functionCalledFlag =false;
}
});
$("#buttons").on("click", "button.red", function(){
if(!functionCalledFlag ){
// only do this if the event above isn't fired
functionCalledFlag =true;
}else{
functionCalledFlag =false;
}
});

hiding div when clicked outside the div

Please look at the code here : http://jsbin.com/esokic/10/edit#source
When I click on customer support a div is shown
What I want is when someone clicks out of the div, the div should hide, I tried a couple of things, but they don't seem to work..
$(document.body).one("click", function() {$(".cust-support-outer").hide();
});
Also:
$("body").click(function(e){
if(e.target.className !== "csupport-drop")
{
$(".cust-support-outer").hide();
}
});
Would appreciate any help...
--Arnab

Arnab
I did this change in your js and worked
try this, use this js code
$(function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(document).bind("click", function(e) {
if(!$(e.target).hasClass("get-daily-alerts-outer")){
$(".get-daily-alerts-outer").hide()
}
});
$(".close").click(function(){$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){$(".get-daily-alerts-outer").show();
return false
});
});
I just changed how you bind the "click" event to the document and pass the Event object to the function so you can check over what element the click event was fire.

Try:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.cust-support-outer').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.cust-support-outer').hide();
});
});

Bind this to body
$("body").click(function() {
if ($(this).attr("class") == "cust-support-outer") {
// inside
} else {
// not inside
}
});