This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
This was a dublicate question, George's link to a previous question had my answer
I'm having an issue where selectors aren't functioning with dynamically generated javascript content.
The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.
Code that Generates the divs:
for (x; x < y; x++) {
output = output + '<div class="over">'+
'But not for these generated divs'+
'</div>';
}
$("#content").html(output);
Code that styles the divs with class "over":
$(".over").hover(function () {
$(this).addClass("styling");
});
$(".over").mouseout(function () {
$(this).removeClass("styling");
});
http://jsfiddle.net/kjhansen/1e08ypms/28/
Use jQuery on() Try this:
$(document).on('mouseover','.over',function () {
$(this).addClass("styling");
});
$(document).on('mouseout','.over',function () {
$(this).removeClass("styling");
});
FIDDLE EXAMPLE
Related
This question already has answers here:
Native javascript equivalent of jQuery :contains() selector
(6 answers)
Closed 3 years ago.
I'm making a chrome extension and i want to do an action when a certain element exist on the page. But the class element isn't precise enough to select the element only by it's class.
the element i'm looking for on pages is the following :
<span class="btn-text">M'y emmener</span>
I tried :
const listfull = document.querySelector('.btn-text:contains("m\'y emmener")');
if (listfull) {
console.log("hello")
}
But it doesn't seems to work anybody could tell me how this works ?
:contains is jQuery-specific syntax. It's also case-sensitive. To achieve what you're looking for, either use jQuery and capitalize the M:
const listfull = $(`.btn-text:contains("M'y emmener")`);
if (listfull.length) {
console.log("hello")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn-text">M'y emmener</span>
Or iterate over all matches of .btn-text and check their textContent:
const listfull = [...document.querySelectorAll(`.btn-text`)]
.find(elm => elm.textContent.includes("M'y emmener"));
if (listfull) {
console.log("hello")
}
<span class="btn-text">M'y emmener</span>
This question already has answers here:
Adding text to an existing text element in JavaScript via DOM
(7 answers)
Closed 3 years ago.
I need to make a dynamic row counter for my table. I do this with a span but how do i run my javascript function on it so it prints the number out?
html;
<span id="Tellen"></span>
Javascript;
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
}
Could someone help me into the right direction, much appreciated.
You didn't assign output to html span
Try this Tag :
<span id="Tellen"></span>
JS
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
document.getElementById('Tellen').innerText = rowCount
}
But you need some event to call tellen() .. It can be onClick of button or something like this
This question already has answers here:
Is there a way to add/remove several classes in one single instruction with classList?
(16 answers)
Closed 5 years ago.
document.getElementById("both-gif").onmouseover=function() {MouseOver()};
document.getElementById("both-gif").onmouseout=function() {MouseOut()};
function MouseOver() {
document.getElementById("both-gif").addClass("animated bounce")
}
function MouseOut() {
document.getElementById("both-gif").removeClass("animated bounce")
}
Im trying to make my gif-image bounce, it has the id "both-gif". what am i doing wrong?
document.getElementById("both-gif").addClass("animated bounce")
here addClass is a jQuery function. it won't work in JavaScript.
You can't chain jQuery function with document.getElementById
You need to change it to
document.getElementById("both-gif").classList.add("animated","bounce")
Also this line
document.getElementById("both-gif").removeClass("animated bounce")
to
document.getElementById("both-gif").classList.remove("animated","bounce")
This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 7 years ago.
I have the following classes (below), they are added dynamically on the HTML (below).
I have classes already present, what Javascript recommended code should be used to remove one or all of these classes if they are already present on the html below. The function I am building, will reset the element, I NEED the current classes to be present, but the colour classes need to be removed if one / multiple values are present.
HTML
<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>
Classes
<ul>
<li>is--blue</li>
<li>is--red</li>
<li>is--yellow</li>
<li>is--purple</li>
<li>is--green</li>
<li>is--pink</li>
<li>is--orange</li>
</ul>
UPDATE:
So in a nutshell, I want to do this jQuery example in javascript:
$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');
This is what I have so far:
document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');
But I get this error:
Uncaught TypeError: Cannot read property 'classList' of undefined
Removing a single class is rather straightforward, what are you having trouble with specifically?
var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
el.classList.remove('is--blue');
});
.is--blue {
color: blue;
}
<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>
This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 8 years ago.
I'm adding click events to li tags in my html. The refresh function I attach to it works fine, just as adding the events. Although the events are all the same..
HTML:
<li class="folder" id="css">css</li>
<li class="folder" id="images">images</li>
<li class="folder" id="js">js</li>
JS:
function addEvent(){
var dirLinks = document.getElementsByClassName('folder');
for(i=0; i< dirLinks.length; i++) {
var tarDir = dirLinks[i].id;
alert(tarDir);
dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+tarDir);}, false);
}
}
I want each li tag to click through to a dir that's equal to it's ID. But all the events let me click through to the last found id..(JS) While the alert shows three different ID's..(css, images & js)
What am I doing wrong here? Can't figure it out.
The problem is that you are referencing tarDir inside a closure, so when you concatenate it you get the last value that has been assigned to it (the value assigned in the last loop iteration). See How do JavaScript closures work? for a deep explanation of how closure works.
To solve, you can replace this:
dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+tarDir);}, false);
with this:
dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+this.id);}, false);
This works because when the closure is evaluated this points to dirLinks[i]
This is a working example (I've replaced the call to refresh with alert only to show that it works): http://jsfiddle.net/fFe8U/1/