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')
Related
I tried to disable the click functionality for the element with id #sports. It works if I invoke alert() inside the function, but I want it to work without invoking it. If I comment out that code, it's not working.
Here is my code:
$("#sports").off("click").on("click", function () {
alert("disable click");
});
You can disabled it with calling the off() method inside the on() method:
$("#sports").on("click", function (){ // on button click
console.log("click disabled"); // Do anything, console.log, alert, anything
$(this).off("click"); // then disable the click event, set it to off,
// this way the on click event won't fire
// again unless it's created, again
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sports">Click</button>
What about trying event.preventDefault()?
$("#sports").on("click", function (event){
event.preventDefault();
event.stopPropagation();
return false;
});
But if you want to disable it, you don't have to override its click function - it is enough to set 'disable' property of the DOM element:
$("#sports").disabled = true;
Say I have a button whose id is "btn" and I add an event to the button as:
$(document).ready(function() {
$("#btn").click(function(){
$("#label1").html((new Date()).getSeconds());
$("#btn").click(function () {});
};
})
where #label1 is a label tap supposed to show the current second.
I wish by click the button at the first time, current second will shown in the label1. And for following click on this button, nothing happen. But what I got is every time the button is clicked, new current second is shown in label1. What's wrong?
Use one() to bind event
$("#btn").one('click', function(){
$("#label1").html((new Date()).getSeconds());
});
Note that $("#btn").click(function () {}); does not unbind the event. It binds click event on that element one more time, so next time when the button is clicked two event handlers will be called one to update the html and other empty function that does nothing.
To unbind the event, off() can be used, but in this case one() is preferred.
$("#btn").on('click', function () {
$("#label1").html((new Date()).getSeconds());
$(this).off('click');
});
You can simply use .one().
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
$(document).ready(function() {
$("#btn").one('click', function(){
$("#label1").html((new Date()).getSeconds());
});
})
At-present you are binding another click handler using $("#btn").click(function () {});
Hello you can remove the click Listener the following way.
$(document).ready(function() {
$("#btn").click(function(){
$("#label1").html((new Date()).getSeconds());
$('#btn').off('click');
});
})
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
}
I have a function like below;
function myfunction(param1,param2,param3){
alert(param1);
alert(param2);
alert(param3);
alert(buttonid);//i want to alert mybutton here
}
$('#mybutton').click(function() {
myfunction("hi","hello","howdy");
});
The function is evoked using a button click event. I want to alert the button's id in the function called. How can I do this?
The this in your current function is referring to the window object. You want to use the event object (whose target property will refer to the element that triggered the action).
function myfunction(param1,param2,param3){
alert(param1);
alert(param2);
alert(param3);
alert(event.target.id);
}
Also, I would suggest using the jQuery on listener rather than the click listener. This will make the listener AJAX compatible.
$(document).on("click", "#mybutton", function(){
myfunction("hi", "hello", "hey");
});
Try this
function myfunction(param1,param2,param3,buttonid){
alert(param1);
alert(param2);
alert(param3);
alert(buttonid);//i want to alert mybutton here
}
$(document).ready(function(){
$('#mybutton').click(function() {
myfunction("hi","hello","howdy",$(this).attr('id'));
});
})
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'));