This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 7 years ago.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = $("div.rsCloseVideoBtn");
var vid_launch = $("h1#vidLaunch");
vid_launch.click(function () {
vaStyle.addClass("hprs-video-active");
});
vid_detach.click(function(){
vaStyle.removeClass("hprs-video-active");
});
Why isn't my removeClass working? Is there a better method?
Also, when you declare a var does it work document-wide?
Sounds like your elements are getting added dynamically. Use event delegation for solving this. I made changes to the event binding.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = "div.rsCloseVideoBtn";
var vid_launch = "h1#vidLaunch";
$(document).on('click', vid_launch, function () {
vaStyle.addClass("hprs-video-active");
});
$(document).on('click', vid_detach, function () {
vaStyle.removeClass("hprs-video-active");
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I need to attach an event to a dynamically created element. With jQuery I can archive this by using the following code:
$("body").on("click", ".my-element", function() {});
And if I added a new .my-element, it automatically got the event attached.
I'm not creating the elements via document.createElement("div");, but I'm using pjax to reload just some parts of the page, so the main JavaScript file just loads one time, for that reason events need to be attached dynamically.
How can I achieve that with vanilla JavaScript?
A pure JavaScript version of your jQuery example
$("body").on("click", ".my-element", function() {});
would be:
document.body.addEventListener("click", function (e) {
if (e.target &&
e.target.classList.contains("my-element")) {
// handle event here
}
});
See example below.
const addTestElements = () => {
var el = document.createElement("p"),
node = document.createTextNode("Test element, class 'my-element'");
el.classList.add("my-element");
el.appendChild(node);
document.body.appendChild(el);
el = document.createElement("p");
node = document.createTextNode("Test element, class 'test'");
el.classList.add("test");
el.appendChild(node);
document.body.appendChild(el);
}
document.getElementById("add").addEventListener("click", addTestElements);
document.body.addEventListener("click", function (e) {
if (e.target &&
e.target.classList.contains("my-element")) {
console.clear();
console.log("An element with class 'my-element' was clicked.")
e.target.style.fontWeight = e.target.style.fontWeight === "bold" ? "normal" : "bold";
}
});
<button id="add">Add element</button>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
After I click on a th with the class database-header, my table gets sorted via the post method, but for some reason the click event listener gets removed, so when I click again on a different database-header, nothing happens. What em i doing wrong ?
$(function () {
var user = $('#user');
var databaseHeader = $('.database-header');
var tableContainer = $('.table-container');
var databaseHeaderValue;
var url = './php/table.php';
databaseHeader.click(function () {
/* Checks for the user login div */
if (user.closest('html').length){
databaseHeaderValue = $(this).html();
$.post(url, {'sort' : databaseHeaderValue}, function (data) {
tableContainer.html(data);
});
}
});
});
Try changing your jquery click like below:
var user = $('#user');
var databaseHeader = '.database-header';
var tableContainer = $('.table-container');
var databaseHeaderValue;
var url = './php/table.php';
$(document).on('click', databaseHeader, function () {
/* Checks for the user login div */
if (user.closest('html').length){
databaseHeaderValue = $(this).html();
$.post(url, {'sort' : databaseHeaderValue}, function (data) {
tableContainer.html(data);
});
}
});
Do you only refresh a part of the page? After a DOM element is added dynamically, you cannot grab it with a jquery selector.
try
$(body).on("click", ".database-header",function(){
etc..
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I've got some cards (forms) created with ng-angular based on Array list.
On each card i have onClick event which doesn't trigger. If I copy paste the function code on browser console, all events work ! I guess that events aren't bind when the DOM is fully loaded.
These are my functions :
$('.floating-open').on('click', function () {
var $this = $(this);
$this.parents('.clickable-button').addClass('clicked');
$this.parents('.clickable-button').next('.layered-content').addClass('active');
setTimeout(function () {
$this.parents('.card-heading').css('overflow', 'hidden');
}, 100);
});
$('.floating-close').on('click', function () {
var $this = $(this);
$this.parents('.layered-content').prev('.clickable-button').removeClass('clicked');
$this.parents('.layered-content').removeClass('active');
setTimeout(function () {
$this.parents('.card-heading').css('overflow', 'initial');
}, 600);
});
Thanks in advance for your help
try to bind click event like below
$(document).on('click', '.floating-close', function(event) {
//your code
}
This question already has answers here:
Event handlers inside a Javascript loop - need a closure?
(2 answers)
Closed 7 years ago.
I have a javaScript file in which i am trying to bind a function named change by using jQuery i tried this code but it is not working?
script.js
for(var i=1; i<suggestionList.length; i++)
{
$list.append("<li>" + suggestionList[i] + "</li>");
// attach handler for click on the suggestions
$list.find("li").eq(i).click(function() {
change(suggestionList[0], suggestionList[i]);
});
}
function change(changeto,changewith)
{
var replaceto=document.getElementById(changeto).innerHTML;
var replacewith=changewith;
var text1=document.getElementById("para").innerHTML;
var afterRe=text1.replace(replaceto,replacewith);
document.getElementById("para").innerHTML=afterRe;
}
please help me why my code is not working?
you can't use i inside the for-loop for click event. I have set a demo jsfiddle here .check If it helps
for(var i=1; i<suggestionList.length; i++)
{
$list.append("<li>" + suggestionList[i] + "</li>");
// attach handler for click on the suggestions
}
$list.find("li").click(function() {
changewith=$(this).html();
change(suggestionList[0], changewith);
});
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
I'm trying to remove the css when somewhere on the page has been clicked. I know how to implement the css changes but can't figure out how to or where to place the listener for a mouse click.
Any suggestions would be great.
$(document).ready(function() {
var friends = false;
$('#friends').click(function() {
friends = true;
$('#cont').css({'left':'502px'});
$('#members').css({'left':'251px','display':'inline','opacity':'1'});
alert(friends);
});
if($(document).click() && friends){
alert('here');
};
});
Got it working eventually using this but modified it alot:
jQuery().ready(function(){
$('#nav').click(function (event) {
$(this).addClass('activ');
event.stopPropagation();
});
$('html').click(function () {
if( $('#nav').hasClass('activ') ){
$('#nav').removeClass('activ');
}
});
});