I have a problem with firing event.
So the code explains it better:
function Test() {
alert("called");
}
$(window).load(function(){
$(window).on( "scroll", Test );
});
Then I want to fire event for that Test to be called somewhere else.
function OnSomeActionDone() {
$(window).scroll(); // fire event
}
But seems like this not work, only from mouse or keyboard scrolling, what is wrong?
You are not invoking the method correctly. One way to invoke it programmatically would be to call the trigger() jQuery function, passing in the scroll handler name, as follows:
function OnSomeActionDone() {
$(window).trigger('scroll'); // fire event
}
You are using it wrong
$(window).scroll(function() {
alert('test');
});
is like
$(window).on('scroll',function() {
alert('TEST');
});
What you need to do is
function OnSomeActionDone() {
$(window).trigger('scroll'); // fire event
}
Related
I've got a problem, I try to call my jquery event.
I have 2 jquery event:
$element.on('click', function (e) { ... });
$element.on('click', '.toggle', function (e) { ... });
I would like to call the event with toggle selector. How can I do this?
$element.trigger('click', '.toggle') call always the first event.
Thank you
Ok thanks,
now i do:
$element.find('toggle').trigger('click')
And it runs fine
I write a click hander like this;
$("#button1").click(function(evntData)
{
alert("button1 clicked.");
});
to invoke it immediately I do like this;
$("#button1").click(function(evntData)
{
alert("button1 clicked.");
}(null));
in this way it is called on start up and work fine. but later when button is clicked this event handler is not called. How can I do it? Thanks
You should trigger click event:
$("#button1").click(function(evntData) {
alert("button1 clicked.");
}).trigger('click');
Another way is to actually call the function and provide the same function reference as event handler:
function onClick(evntData) {
alert("button1 clicked.");
}
$("#button1").click(onClick);
onClick(); // you can pass object parameter evntData if needed
You can use .click() after binding the click event to trigger click :
$("#button1").click(function(evntData)
{
alert("button1 clicked.");
}).click(); //or .trigger('click')
Im suspecting something weird happens here;
$('#botonAñadir').fadeOut(500, function (e) {
$('#botonEditar').fadeIn(500).on('click', function (e) {
console.log(DEBUG + 'en el click del boton');
e.preventDefault();
e.stopPropagation();
localStorage.removeItem(contacto);
that.nuevoContacto();
$(this).fadeOut(500, function () {
$('#botonAñadir').fadeIn();
});
});
});
when i click on #botonAñadir the first time works as expected but the second time you click it call twice that.nuevoContacto(), and so on so the third time calls it 3 times, etc.
Am I following any anti-pattern or such? I cant get it why it behaves like so.
Is there a problem combining fades with on?
EDIT.
I made it like below, even i know it looks ugly at this hour my brain is fryied;
$('#botonAñadir').fadeOut(500, function (e) {
$('#botonEditar').fadeIn(500);
});
$('#botonEditar').on('click', function (e) {
console.log(DEBUG + 'en el click del boton');
e.preventDefault();
e.stopPropagation();
localStorage.removeItem(contacto);
that.nuevoContacto();
$(this).fadeOut(500, function () {
$('#botonAñadir').fadeIn();
$('#botonEditar').off('click');
});
});
The problem is that you are binding the onClick event handler every time your element fades in.
Try binding the event handler outside the the fade effect, or use .off('click') before binding the handler again:
$('#botonEditar').fadeIn(500).off('click').on('click', function (e) {...
They way you have this written, the on('click'... portion is adding another click handler every time the fade out function is executed...
Try using .once() or rewriting to put the on() at the beginning...
$('#botonEditar').fadeIn(500).once('click', function (e) {
I have a drop down menu, and clicking the icon should add the class "Open" to its parent, and then clicking the menu anywhere should close it. But the function inside the bind fires when the icon is clicked. The effect being it adds the class Open, and then removes it straight away.
This is probably a simple issue, but I cannot seem to work out why the 'click' event fires straight away!?
This question may be similar but can't still can't work it out: jQuery bind event firing the event
$(function () {
$(".ui-dropdown-action").bind("click", function () {
$(this).parent()
.addClass("Open")
.bind("click", function () {
$(this).removeClass("Open");
});
});
});
I think you might have a problem with the click event bubbling up the DOM tree. Which is why click is also being fired on the parent.
if you pass in the event object as an argument for the first bind and call event.stopPropagation() as follows
$(function () {
$(".ui-dropdown-action").bind("click", function (event) {
event.stopPropagation();
$(this).parent()
.addClass("Open")
.bind("click", function () {
$(this).removeClass("Open");
});
});
});
should fix your issue.
You can pass the event argument and stop the bubbling of the event .. Try this
$(function () {
$(".ui-dropdown-action").bind("click", function () {
$(this).parent()
.addClass("Open")
.unbind().bind("click", function (e) {
$(this).removeClass("Open");
e.stopPropagation();
});
});
});
This will make sure the parent event will not fire when the icon is clicked..
Also every single time you click the icon the event for the parent is bound again which will create multiple click events .. Need to make sure you unbind and bind them again to avoid that..
It is firing right away because the click event is bubbling to the parent and then firing that selector. To fix this you could use a setTimeout() around the 2nd bind.
$(function () {
$(".ui-dropdown-action").bind("click", function () {
var parent = $(this).parent();
parent.addClass("Open");
setTimeout(function() {
parent.bind("click", function () {
$(this).removeClass("Open");
});
}, 0);
});
});
Another option would be to to a stopPropagation() on the event on your first bind, though that would prevent any other handlers from triggering on that event.
In my case, when I use something like this
$("#modal .button")[0].click(() => console.log('test'))
its doesnt work and seems like click firing immediately
Solution for me was:
const button = $("#modal .button")[0];
$(button).click(() => console.log('test'));
I disabled the click event of image using unbind method. But I don't know how to recover the click event again.
Here is the code,
<img src="testimg.jpg" id="sub_form">
disabled the click event of above image using the code
$('#sub_form').unbind('click');
How do i recover the click event? I tried with the bind event
$('#sub_form').bind('click');
but it wont work.
Why I'm going for click event of image is ajax form submission. The code is,
$("#sub_form").click(function() {
var input_data = $('#testform').serialize();
$.ajax({
//my code
});
});
how can i achieve this after unbind of image is performed.
If you saved the handler, you can just invoke it again:
var handler = function() {
alert('click');
};
$('#sub_form').click(handler);
// disabling:
$('#sub_form').unbind('click', handler);
// reenabling:
$('#sub_form').click(handler);
If you don’t know what handlers that are bound, you can find and save them before unbinding:
// save the click handlers
var events = $('#sub_form').data('events'),
handlers = 'click' in events ? Array.prototype.slice.call(events.click) : [],
handler = function() {
$.each(handlers, function() {
this.handler();
});
};
// disable
$('#sub_form').unbind('click');
// reenable
$('#sub_form').bind('click', handler);
http://jsfiddle.net/sPPnE/
You can specify a function reference when calling .unbind():
For instance:
function myHandler( event ) {
}
// bind the click handler
$('#sub_form').bind('click', myHandler);
// remove only this exact click handler
$('#sub_form').unbind('click', myHandler);
// bind it again
$('#sub_form').bind('click', myHandler);
Sidenote: As for jQuery 1.7.x you should use the .on() and .off() equivalent methods.
Reference: .on(), .off(), .bind(), .unbind()
You need to provide the event handler with a function to run when the event occurs, try this:
$('#sub_form').bind('click', function() {
alert("You clicked #sub_form");
});
If you are going to be binding/unbinding regularly, it would be best to put the logic into it's own function so that it can be easily rebound:
$("#element").click(function() {
$("#sub_form").unbind();
// do something
$("#sub_form").bind('click', myFunc);
});
function myFunc() {
alert("You clicked #sub_form");
}