This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
i have this button inside a popup.(in a javascript file)
'<div class="thisdiv" >'+
'<button class="btn btn-primary" >this</button>'+
'</div>'+
and i am accessing this in function
$('.thisdiv').on('click', function (e) {
$('.overlay').hide();
$('body').removeClass('overflow');
});
this is basically supposed to be a button which, when clicked, closes the pop up. (the simple cross button)
but it does not work. it does not go into the function, i was told to use delegates. but shouldn't this be the simpler method? what am i missing?
Seems like you are creating the elements dynamically. Then you need to use event delegation,
$(document).on('click', '.thisdiv', function (e) {
$('.overlay').hide();
$('body').removeClass('overflow');
});
Related
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:
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 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 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.
So here is a question.
I have HTML
<a class="callback">Callback</a>
I have external Jquery-file (with Bootstrap.js included)
$(".callback").on('click', function() {
var myModal = '<div><a id="callback"></div>';
$(myModal).modal('show');
});
$("#callback").on('click', function() {
//some actions
});
So ".callback"-event works fine because that link we have in the current DOM.
But "#callback"-event does NOT work. Maybe cos of that element appears after JS-file has loaded (seriously?).
Please, could anyone answer why "#callback"-event does NOT work?
Thanks a lot!
You need to use jQuery's event delegation syntax for on() when binding to dynamically created elements:
$(document).on('click', "#callback", function() {