We Keep Coding

Use off() inside event jquery

$(function(){
$("#selector").on("someevent", function(){
let variable = some_value;
$("#anotherselector").click(function(){
//code involving variable here
if(condition){
$(this).off(reference to click event here);
}
});
});
});
Is there any way to turn off an event from inside its handler? I'm trying to do something like the code above, and I need it to turn off ONLY that specific click event (each click event is different).

To reference the click event, you can simply pass it 'click' and the selector for which to disable the event:
$(function(){
$("#selector").on("someevent", function(){
$("#anotherselector").click(function(){
if(condition){
$('#anotherselector').off('click');
}
});
});
});
let numHandler = 0;
$('#register').click(function () {
let counter = 0;
let num = ++numHandler;
$('#clickme').click(function handler () {
counter++;
console.log(`Handler ${num} clicked!`);
if (counter == 3) $('#clickme').off('click', handler);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickme">Click me!</button>
<button id="register">Register new handler</button>
You can read more about the off function in the jQuery documentation.

JQuery click same button with different class

I have a button with class name test-button test-button--check. After clicking test-button--check it should do something and be replaced by class test-button--reset
For test-button--reset I want to write another function, but It doesn't work. Because, the previous function executes again.
$(".test-button--check").on("click", function() {
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
});
$(".test-button--reset").on("click", function() {
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
});
What can I do?
Thanks

You can write your code inside the document.ready in this way
$(".test-button--check .test-button--reset").on("click", function(e) {
e.preventDefault();
var obj=$(this);
if($(obj).hasClass('test-button--check')){
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
}
if($(obj).hasClass('test-button--reset')){
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
}
});

Try using .off() to remove an event handler, in this case, it is click.
Should be something like this:
$('.test-button.test-button--reset').off().click(function() {...});

I think this will work:
var check = function checkFunc() {
alert('Check is clicked!');
$(this).addClass('test-button--reset').removeClass('test-button--check');
$('.test-button--reset').unbind('click',check);
$('.test-button--reset').bind('click',reset);
}
var reset = function resetFunc() {
alert('Reset is clicked!');
$(this).addClass('test-button--check').removeClass('test-button--reset');
$('.test-button--check').unbind('click',reset);
$('.test-button--check').bind('click',check);
}
$('.test-button--check').bind('click',check);
Using bind and unbind

Define a function globally in jQuery

I have some simple jQuery code, and it has a problem. The menu handler function doesn't work at all.
var clicked = false;
$(document).ready(function(){
$TemplateMenu= $('<p class="paragraph">texxt</p>');
$('.TemplateMaker').click();
this.menuhandler();
});
});
function menuhandler(){
if(clicked == false){
$(this).after($TemplateMenu);
clicked = true;
}
else{
$TemplateMenu.remove();
clicked = false;
}
For some reason, the function works if I put it directly inside click() like this:
$('.TemplateMaker').click(function(){
if(clicked == false){
$(this).after($TemplateMenu);
clicked = true;
}
else{
$TemplateMenu.remove();
clicked = false;
}
});
});
What is wrong with this code? Did I define the function wrong or do I need something special if the function contain jQuery elements?
Thanks for the help :-)
Edit:
I edit the code to include your guys suggestions, its stile doesn't seem to work.
code:
var clicked = false;
$(document).ready(function(){
$TemplateMenu= $('<p class="paragraph">texxt</p><p class="p2">texxt</p>');
$('.TemplateMaker').click(menuHandler($(this)));
});
function menuHandler(obj){
if(clicked == false){
$(obj).after($TemplateMenu);
clicked = true;
}
else{
$TemplateMenu.remove();
clicked = false;
}}
I notic now that the jquery throw this "event.returnValue is deprecated. Please use the standard event.preventDefault() instead. ", but I don't know how its contact to my script.

$('.TemplateMaker').click();
this.menuhandler();
});
Try replacing this.menuhandler(); with just menuhandler(); as shown below:
$('.TemplateMaker').click();
menuhandler();
});
Edit: In response to your comment. Try using this instead of $(this) in the menuhandler() of your original code.

You probably want the menuHandler function to fire when someone clicks on the button? Then you can simply change your code as follows:
$('.TemplateMaker').click(menuHandler);
Edit:
You basically have two options:
Option1:
You don't have to pass $(this) change your code to this (make sure you remove the parameter in the menuHandler function if you choose this approach):
$(document).ready(function(){
$TemplateMenu= $('<p class="paragraph">texxt</p><p class="p2">texxt</p>');
$('.TemplateMaker').click(menuHandler);
});
Option2:
Or if you want to pass $(this) you can do something like this (keep the parameter in the menuHandler function if you choose this approach):
$(document).ready(function(){
$TemplateMenu= $('<p class="paragraph">texxt</p><p class="p2">texxt</p>');
$('.TemplateMaker').click(function() {
menuHandler($(this));
});
});

Combining jquery functions - on() hover/mouseenter/mouseleave

I have a series of elements (lets call them '.my-elements') - some load on document ready, while others are loaded later via a pagination script.
I would like to set a variable according to whether or not the mouse is over these elements. The code below works, but I suspect there is a better way... Can I do this so I only have to reference the DOM once?
$(document).on('mouseenter','.my-elements', function(){
mouse_is_inside = true;
});
$(document).on('mouseleave','.my-elements', function(){
mouse_is_inside = false;
});
Thanks!

You can bind to both together and check the event.type:
$(document).on('mouseenter mouseleave', '.my-elements', function (ev) {
mouse_is_inside = ev.type === 'mouseenter';
});
Or, if you want to keep them separate, .on has another syntax that takes an event map:
$(document).on({
mouseenter: function () {
mouse_is_inside = true;
},
mouseleave: function () {
mouse_is_inside = false;
}
}, '.my-elements');

Check out jQuery hover which is the same as:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
UPDATE: I just realized you need to persist the events via the on() method. In that case, you can use an event map like so:
.on({
mouseenter: function() {
console.log('enter');
},
mouseleave: function() {
console.log('bye!');
}
})

Almost all jQuery methods return objects, so you can chain them together:
$(document).on('mouseenter','.my-elements', function(){
mouse_is_inside = true;
}).on('mouseleave','.my-elements', function(){
mouse_is_inside = false;
});

You could also try:
$(".my-elements").hover(function(eIn) {
// do work for mouse over
},
function(eOut) {
// do work for mouse out
});
update and correction
realized you need more dynamic lock in which case Jonathan Lonowski's or Derek Hunziker's is perfect

For starters, you can select for your elements instead of document.
$('.my-elements').on('mouseenter', function(){
mouse_is_inside = true;
});
You could try a shortcut notation like this...
$('.my-elements').on('mouseenter mouseleave', function(){
mouse_is_inside = !mouse_is_inside;
});
This will negate the value every time the mouse goes in or out, which should keep the mouse_is_inside variable set to the right value.

$('.my-elements').on('mouseenter mouseleave', function(event){
mouse_is_inside = event.type === 'mouseenter';
});
but its generally not a good idea to have a global variable incidating a event state

Correct syntax for defining an event delegator

Normally you write a handler for a button click like this:
$(document).ready(function()
{
$("button").click(function()
{
doSomething();
});
});
But in the case of an event delegator, to respond to an event with a function such as this:
function doSomething(event)
{
if (ev.target.id == 'button1' )
{
//do your stuff
console.log('#button1 click');
}
else
{
console.log('not a #button1 click');
}
}
What I'm confused about is the correct syntax for defining the event that calls this delegator function - this? (A):
$(document).ready(function()
{
$(function()
{
$('button').click(doSomething);
});
});
or this? (B):
$(document).ready(function()
{
$("button").click(doSomething);
});
Which is correct and why?

In choice A you are just repeating the document.ready syntax twice.
// These two lines are equal
$(document).ready(fn);
$(fn);
All you need to do is choice B

While choice B would certainly be the way to do this if you needed to use a separate function, i.e., in the case where you needed to invoke the function from somewhere other than a button click, my preference is usually to put the code in line. The only other times I don't do this is when it would improve readability.
$(function() {
$("button").click( function(e) {
if (e.target.id == 'button1') {
alert('button1 clicked');
}
...
});
});