This question already has answers here:
Add click event on div tag using JavaScript
(6 answers)
Closed 7 years ago.
This is basic but I have no idea how to do this.
There is an addEventListener that fires on page load.
var imgcnvs = document.createElement('canvas');
var imagecxt = imgcnvs.getContext('2d');
window.addEventListener('load', function(){
//do something
}, false);
How can I convert window.addEventListener('load', function(){ to work when $('#startBtn') is clicked? `
$( "#startBtn" ).click(function() {
//dosomething
});
Please read the jquery documentation.
You need to get your target element, using document.getElementById for instance, and then attach the event listener to it. As follows:
document.getElementById("startBtn").addEventListener("click", function(event) {
// Do something
}, false);
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a PHP snippet in a separate file which I am loading in a javascript file using jquery:
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php");
This works because I am able to show this on screen. However, this snippet contains a button which I would like to click in the same javascript file where I loaded the snippet. something simple like:
$(".signupbtn").on("click", function(){
console.log("signed Up");
});
This click is, however, not working. signupbtn is a div element in the snippet. Somehow I am missing an extra step since jquery seems to not be recognizing the elements in the snippet.
Lazy loaded elements are not recognized from eventhandlers which are already initialized. So you have to set the event on a parent. This should work:
$(document).on('click', '.signupbtn', function(){
console.log("signed Up");
});
https://api.jquery.com/load/
You could use the complete function to check if it has loaded, or you could just put the button function inside there.
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php", function() {
$(".signupbtn").on("click", function() {
console.log("signed Up");
});
});
This question already has answers here:
jquery stop child triggering parent event
(7 answers)
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Prevent click from child firing parent click event
(4 answers)
Closed 5 years ago.
Click on "child" also make the alert work.
But what's the simple way to make click don't work on child elements?
Here is an example: https://fiddle.jshell.net/k8t5dpg2/
Html
<div id="secondary"> 1
<a>child</a>
</div>
Jquery
$('#secondary').click(function () {
alert('something')
});
Add an id to the child and :
$("#child").click(function () {
return false;
});
Use event.target to determine what is being clicked.
Example:
$('#secondary').click(function (event) {
var target = $(event.target);
if (target.is(this)) {
alert('something');
}
});
You can try this.
$('#secondary').click(function (event) {
if(event.target.nodeName ==='A') {
return false;
}else{
alert('something');
}
});
This question already has answers here:
jQuery click not working for dynamically created items [duplicate]
(8 answers)
Closed 8 years ago.
I search around the web but cant do this work..
Im creating a dialog in a js.file . In this js i have a function that creates a button, but with innerHTML...
var divButtons = document.getElementById('buttons_insert1');
var buttons_insert = "<button id='okcad' class='button_ok' value='' > <img src='/php/Images/OK.png' alt='OK' /> OK </button>";
divButtons.innerHTML = divButtons.innerHTML + buttons_insert;
and in the index.html i have a jquery function to get the click event.
$("#okcad1").click(function()
{
alert('hello world');
}
but this is not working..the event dont fire...
Someone could help me?
Regards!
Rafael S.
Use event delegation
$(document).on("click" , "#buttons_insert1 #okcad1" , function()
{
alert('hello world');
});
You need event-delegation, since you're appending it after DOM has been loaded. For that use jQuery.on
$("#buttons_insert1").on('click', '#okcad1', function() {
alert('hello world');
}
Just click will bind the event to the elements which were present in the DOM when the code got executed, so you need the technique of event-delegation.
This question already has answers here:
jquery .click overriding anchor href when i dont want it to!
(4 answers)
Closed 8 years ago.
When setting up a div with a class, attaching a click event to that class using jQuery, it prevents any child href from working.
For example:
HTML
<div class="someClass">
some text here
and a link
</div>
JS
$('body').on('click', '.someClass', function(e) {
alert("clicked");
});
jsfiddle for this: http://jsfiddle.net/w6ero5j5/2/
it will always alert the message, even when clicking on the link.
how can I make the link works?
I dont know why do you want this. But, it happen when you put alert function.
Then If you execute this, there is not problem. code here
$('.someClass').on('click', function(){
var $this = $(this);
if ( $this.hasClass("ok") ) {
$this.removeClass("ok");
} else {
$this.addClass("ok");
}
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I'm generating images from a folder with this script:
$(document).ready(function() {
$.ajax({
url: "gallery_images",
success: function(data){
$(data).find("a:contains(.jpg),a:contains(.gif),a:contains(.png)").each(function(){
// will loop through
var images = $(this).attr("href");
$('<div class="g_image"></div>').html('<img class="g_img" src="gallery_images/'+images+'"/>').appendTo('#galerija');
});
}
});
});
The problem is that, then I'm trying to click the image, simple jQuery click event does not work.
$(".g_image img").click(function(){
alert("WORKING!");
});
Use event delegation for this, you can take closest parent document instead document.body
$(document.body).on("click","#g_image img",function(){
alert("WORKING!");
});
try using delegate.
$("body").on("click","#g_image img",function(){
alert("WORKING!");
});