This question already has answers here:
passing parameter to javascript onclick function
(3 answers)
Closed 8 years ago.
Is there any possibilities to use the onclick HTML attribute to call
more than one jQuery functions
onclick="$('#editParentDetailsViews').removeClass('tab selected');$('#editStudentDetailsPopupPnl').hide(); return false;"
Here, the first function work properly and the 2nd function not working.
I suggest you these ways:
1-addEventListener:
document.getElementById('btn').addEventListener('click', function(){
function1();
function2();
});
2-inline (onclick)
onClick="function1();function2();"
3-Jquery Standard click function:
$("button").click(function(){
//Your functions code here
});
4-Jquery on:
$('#button').on('click',function(){
//Your code here
})
You can find more ways...
Why dont you use jquery click() listener? Do not mix dom with jquery. Keep it simple.
$(yourselector).click(function(){
//call some funtions
});
<div id="yup">click me</div>
js
$(function(){ // same as $(document).ready()...
$('#yup').on('click',function(){
// call function 1
// call function 2
// call function 3
// ...
});
});
DEMO
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:
Why can't I use onClick to execute a function inside a jQuery $(document).ready function?
(8 answers)
Closed 6 years ago.
I am getting error SelectAll is not defined when i click on select all button.
function selectAll(){
$('#langtabs').data('tabSelect').selectAll();
}
Here is Fiddle
Move this function
function selectAll(){
$('#langtabs').data('tabSelect').selectAll();
}
Outside the $(function(){ .... }); otherwise it wont be in global scope which is where onclick will be looking for it.
Fiddle
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have a checkboxlist from which I want to get check event.
the checkboxes are created dynamically.
I am not able to fire the event
what I tried so far is
$(".XAxisrowCheckbox").click(function () {
//Do stuff
});
I also tried with this
$("input.XAxisrowCheckbox").click(function () {
//Do stuff
});
but no luck for me. Tag goes like this:
<input type="checkbox" class="XAxisrowCheckbox">
Please suggest something.
jQuery.on accepts selector as an argument (http://api.jquery.com/on/)
Example:
$(document).on('click', '.XAxisrowCheckbox', function () {
//do stuff
});
This question already has answers here:
jquery - Click event not working for dynamically created button [duplicate]
(4 answers)
Jquery/Javascript: Buttons added dynamically with javascript do not work
(3 answers)
Closed 8 years ago.
I can't get an alert to trigger when a dynamically generated button is clicked?
The alert is not going to be the final function but was a test to make sure the trigger is working correctly.
I tried a "onclick" function as a trigger and used the id as a jQuery trigger so not sure why it would not work; I will add a snippet below that shows what I mean.
From the file that generates and displays the button (it displays OK):
var modOptsMsg = document.getElementById("modOptionsMessage").value + '<input type="button" id="removePost" onclick="removePost()" value="Remove Post"/>';
$("#modOptsShowMsg").empty().append(modOptsMsg);
Neither of these simple tests work in JS or jQuery:
function removePost(){
alert("alert");
}
$('#removePost').click(function(){
alert("alert");
});
As #Regent has pointed out in the comments, use:
$(document).on("click", '#removePost', function() {
alert("alert");
});
$('#modOptsShowMsg').on("click", '#removePost', function() {
alert("alert");
});
the above code will work..if jquery is lesser than 1.7 use .live() instead of .on()
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 10 years ago.
I have this js code:
(function($, undefined) {
$("a").click(function(event) { //or another elemtnt
alert('Hello!');
})
})(jQuery);
And of course link:
Google
the JS code doesn't work, but if I change it to:
(function($, undefined) {
$("*").click(function(event) {
alert('Hello!');
})
})(jQuery);
all works!
If you've put your JavaScript before the a node is loaded the effect will be something like you described. Try this instead:
$(function () {
$("a").click(function(event) { //or another elemtnt
alert('Hello!');
})
});
This will invoke the anonymous function when the DOM tree is ready. Here is an example in JSFiddle.
When you use * as selector jQuery adds click handler to the html element, that's why you get the alert.
why don´t you try with document.ready?
$(document).ready( function (){
$('a').click(function (){
alert("a");
});
});
This is a possible solution:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
why don't you give an ID to it and select for $('#my-id') for setting the event?