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.
Related
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>
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 7 years ago.
EDIT : I use Bootstrap as well. No console errors
I have a button which hides and un-hides a div
<button type="button" class="btn btn-info" data-toggle="collapse" id="showBtnFullDetails" data-target="#showFullDetails" value="Dynamic">Show Responses</button>
and the Div
<div id="showFullDetails" class="collapse out">Some Data</div>
Then I have this onclick event
$("#showBtnFullDetails").click(function() {
alert("Test");
});
But it doesn't work. On other buttons it works. Is there some explation to this? I need this button to work to hide and unhide that div as well I need it to accept onclick function coz I'll be doing other task.
Use event delegation and see if that catches it.
$(document).on("click", "#showBtnFullDetails", function() {
alert("Test");
});
Or I believe there is a shown event
$("#showFullDetails").on("show.bs.collapse shown.bs.collapse",function(event){
alert("Test");
});
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:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I know that on click is used for dynamically generated elements ... so my AJAX returns data and the link to be clicked on ... but for some reason , nothing happens .. below is my code
// jquery for the click event
$(".back_to_followers").on('click', function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
and the link brought by AJAX
<a class="back_to_followers" style="color:blue; font-size:20px;" href="#"> Back to list of followers </a>
Use this:
$(document).on('click', ".back_to_followers", function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
Your code only works on what is already loaded so you can set an event which targets the entire document or the parent element which contains the .back_to_followers and then defines the element which must be clicked: elements with .back_to_followers class.