This question already has answers here:
How do I get the clicked element with inline HTML onclick and jQuery?
(2 answers)
Closed 5 years ago.
<button onclick="func()"></button>
and I want to locate the button element in func(), but when I use $(this) it seems that it always refer to the window object. Then what's the good practice to locate the element being clicked?
function func($this){
alert($($this).val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="test" onclick="func(this)">click</button>
You can use event.target to get the button element inside func function. Then you can convert to jQuery object. For example, in code below, I get buttons id.
function func(){
var button = $(event.target);
console.log(button.attr("id"));
}
function func(){
var button = $(event.target);
console.log(button.attr("id"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button onclick="func()" id="button1">Click</button>
Related
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 6 years ago.
I am creating a button on the fly and appending it to a div.
I want to capture the click event on that button.
function(){
$('#menuDiv').append('<div class ="buttonWrapper"><input type="button" id="addToOrder" name="addToOrder" value="Add to order"></div>');
}
and then trying to capture the click event with this
$("#addToOrder").click(function () {
//Grab the selections made on the form
window.alert('i m in add to order');
updateOrderWindow();
});
This function is not executing. Don't know why. I have also tried it with the .buttonWrapper div class but it didn't work.
You may want to use the on handler to bind dynamically created elements:
$('#menuDiv').on('click', '#addToOrder', function () {
//Grab the selections made on the form
window.alert('i m in add to order');
updateOrderWindow();
});
This will bind the event itself to the menuDiv element, and will run the click handler for any children #addToOrder
Problem that your button created dynamically
You can try to use next code
$(document).on("click", "#addToOrder", function(){
alert ('button clicked');
});
Try with this
$(function(){
$('#menuDiv').append('<div class ="buttonWrapper"><input type="button" id="addToOrder" name="addToOrder" value="Add to order"></div>');
});
$('#menuDiv').on('click','#addToOrder', function (){
//Grab the selections made on the form
window.alert('i m in add to order');
//updateOrderWindow();
});
<div id="menuDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
Another toggleClass() problem. There are dozens question about this jQuery function but I could not find this specific one.
I have 2 buttons. One toggles the class of the other on click. This works fine since the colour changes, however when I use a click() event on the 'new' class nothing happens.
html
<button type='button' id='button1'>button 1</button>
<button type='button' id='button2'>button 2</button>
css
.pushed {
background-color: salmon;
}
js
$('#button1').click(function () {
$('#button2').toggleClass('pushed');
});
$('.pushed').click(function () {
alert('pushed!')
});
you can try it here: https://jsfiddle.net/tk9pt3o2/
Because you select the element with .pushed before even exists. Try to use this:
$(document).on('click', '.pushed',function () {
alert('pushed!')
});
on will bind the click event to the current matched elements and future matched elements.
Consider that you can just register event for an existing Dom elements.
the key point is $('.pushed') return jquery object with no element to register the event on it.
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:
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:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
This is the task I am trying to implement:
after an element "a" is clicked, jQuery generated some other elements, for example, a "p". Then if the "p" generated by JS is clicked, a msgbox pops up.
This is the example code I wrote: http://jsfiddle.net/ux3n8/
$(".original").click(function(){
var p=$('<p>').text("hahahahahaha");
$(p).addClass("createdByJS");
$(".main").append($(p));
});
$(".createdByJS").click( function(){
alert("hello World!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a class="original">test</p>
</div>
If I remove the event of $("a").click(function(), but still have the jQuery to generate the "p" there, everything works well. But if the "p" is generated on a click of "a", then I cannot add further jQuery functions to it.
I am still new to coding. It would be really appreciated if someone could help me find a solution.
Thank you very much!
You need to delegate the event to an element which is present at the time of adding the new element. In this case document.
http://learn.jquery.com/events/event-delegation/
Demo:http://jsfiddle.net/robschmuecker/ux3n8/2/
$(".original").click(function () {
var p = $('<p>').text("hahahahahaha");
$(p).addClass("createdByJS");
$(".main").append($(p));
});
$(document).on('click', '.createdByJS', function () {
alert("hello World!");
});