I have a problem: I want to execute the click() event before the mouseenter() event. On mobile devices both work after clicking on an element, but I want mouseenter() to be executed after click().
Here is my code:
$(icon_disabled).click(function() {
if($(disabled_list).hasClass("list-visible-sec")) {
$(disabled_list).removeClass("list-visible-sec");
$(this).removeClass("icons-visible");
} else {
$(disabled_list).addClass("list-visible-sec");
$(this).addClass("icons-visible");
}
});
$(icon_disabled).mouseenter(function() {
$(this).addClass("icons-visible");
$(disabled_list).addClass("list-visible-sec");
});
When you have to trigger an event after another event you can trigger that event inside the callback of 1st event. Here I'm maintaining a counter to prevent multiple event to be activated.
$(document).ready(function(){
let counter = 0;
$('#test').click(function(){
console.log('click');
if(counter === 0){
$('#test').on('mouseenter', function(){
console.log('mouseenter');
counter++;
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<button>click</button>
</div>
Related
I have a button that triggers an event on a click. Then I have a subscriber to that event. Inside the subscriber's event handler if certain condition is true then I want to stop processing everything inside button's click event.
I tried calling e.preventDefault(), e.stopPropagation() and e.stopImmediatePropagation() but nothing works.
$("#btn").click(function() {
// trigger event
console.log("triggering event");
$(document).trigger("response.beforeSave");
//I want to stop processing after this when subscriber invokes preventDefault() or
//stopPropagation()
console.log("after trigger. This should not get invoked.");
})
$(document).off("response.beforeSave").on("response.beforeSave", function(e) {
console.log("start subscriber");
if (true) // if condition is true
{
//e.preventDefault();
//e.stopPropagation();
e.stopImmediatePropagation();
return;
}
console.log("exit subscriber. This should not get invoked.");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="button">Click Me</button>
You should create your own Event Object and pass that to the .trigger rather than a string with the event name.
This will allow you to check what happened to the event.
An example exists on the jQuery trigger page
var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
// Perform an action...
}
Here's your code updated to match:
$("#btn").click(function(e) {
// trigger event
console.log("triggering event");
// create a new event object
var beforeSaveEvent = jQuery.Event("response.beforeSave");
$(document).trigger(beforeSaveEvent);
if (beforeSaveEvent.isImmediatePropagationStopped()) {
console.log("event stopped");
// can also check beforeSaveEvent.isDefaultPrevented
// can also check beforeSaveEvent.isPropagationStopped
// e is the click event - function(e) above
// could also use `event` here
// "cancel" the click event
e.stopPropagation();
return;
}
console.log("after trigger. This should not get invoked.");
})
$(document).off("response.beforeSave").on("response.beforeSave", function(e) {
console.log("start subscriber");
if (true) // if condition is true
{
// whichever is used, check the equivalent event.isXXX
//e.preventDefault();
//e.stopPropagation();
e.stopImmediatePropagation();
return;
}
console.log("exit subscriber. This should not get invoked.");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="button">Click Me</button>
To put it simple, here's a suggestion by passing arbitrary data (a boolean in your case) via the second parameter of .trigger("EventNamespace", [])
$("#btn").on("click", function(evt) {
const canSave = document.querySelector("[name=canSave]").checked;
$(document).trigger("response.beforeSave", [{canSave}]);
console.log(`Handler before: canSave is ${canSave}`);
if (!canSave) return;
console.log(`Handler after`);
});
$(document).on("response.beforeSave", function(evt, data) {
if (!data.canSave) return;
console.log(`Subscriber: canSave is ${data.canSave}`);
});
<label><input type="checkbox" name="canSave"> toggle "canSave"</label><br>
<button id="btn" type="button">Click Me</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
PS: place $(document).trigger before (like in the example) or after the if(canSave) statement - depending on what you need.
$(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.
I have a button inside a division.Both have separate onclick listeners.But since button is a part of the division,the event attached to button is also triggered when clicked.Is there a way to remove it?
i tried :not / .not.it dint work.
<div id="divson">
<button id="btn"></button>
</div>
$('#divson').not('#btn').click(function sayHello() {
alert('Helo!');
});
$('#btn').click(function sayJello() {
alert('Jelo!');
});
http://jsfiddle.net/gw3LqrcL/
Just return false; in your handler to stop the event propagation: http://jsfiddle.net/gw3LqrcL/1/
Use stopPropagation on the event passed in to the handler on #btn to stop the event bubbling to the parent element:
$('#divson').click(function () {
alert('Helo!');
});
$('#btn').click(function (e) {
e.stopPropagation();
alert('Jelo!');
});
Updated fiddle
I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?
In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');
Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});
u can use $(document).ready :
$(document).ready(function(){
//put your code here
});
I'm trying to manually trigger a mousemove event with jQuery. Demo in this fiddle http://jsfiddle.net/qJJQW/
From other similar posts on Stack Overflow it seems that this should work. Why isn't it?
Use jQuery to bind the mousemove event:
$(function () {
$("#test").on("mousemove", youCantHandleTheFunc);
$('#button').click(function () {
$('#test').trigger('mousemove', {type:'custom mouse move'});
});
});
function youCantHandleTheFunc (e,customE) {
if (customE != undefined) {
e = customE;
}
$('#result').html(e.type);
}
Your updated fiddle.
jQuery's trigger() only triggers event handlers set with jQuery ?
$(function(){
$('#test').on('mousemove', youCantHandleTheFunc);
$('#button').click(function(){
$('#test').trigger('mousemove',{type:'custom mouse move'});
});
});
function youCantHandleTheFunc(e,customE){
if (customE!=undefined){
e=customE;
}
$('#result').html(e.type);
}
FIDDLE