I am writing a userscript using jQuery. I am trying to change the content of the divs with the class foo so it contains bar. With a static list of elements, I can do it using $(document).ready():
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">foo</div>
<div class="foo">foo</div>
</div>
However, I can't figure out how to replace the text of divs that get inserted dynamically:
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
Using $(document).ready() only works on the statically inserted divs, as those are the only ones there when the document is loaded.
How can I make the divs that are dynamically added to #content get their content changed to bar?
Note sure why you don't just change the $("<div></div>").text("foo") to $("<div></div>").text("bar");
But the code in your $(document).ready() only runs once.
so do something like this.
// The userscript
$(document).ready(function() {
footext();
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
footext();
});
function footext() {
$(".foo").text("bar");
}
Demo
// The userscript
$(document).ready(function() {
footext();
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
footext();
});
function footext() {
$(".foo").text("bar");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
You can also use DOMNodeInserted
$('body').on('DOMNodeInserted', '.foo', function () {
$(this).text("bar");
});
Demo
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
});
$('body').on('DOMNodeInserted', '.foo', function () {
$(this).text("bar");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
Add this
`$(".foo").text("bar");`
inside the button click function.
// The userscript
$(document).ready(function() {
$(".foo").text("bar");
});
// A function to dynamically add another div:
$("#add").click(function() {
$("<div></div>").text("foo").addClass("foo").appendTo("#content");
$(".foo").text("bar");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="foo">Div 1</div>
<div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to
Related
I'd expect this to pop up an alert for any div I click inside the section id playGrid, but it does nothing.
<div id="playGrid" class="w">
<section>
<div id="0_0"></div>
<div id="0_1"></div>
<div id="0_2"></div>
<div id="0_3"></div>
<div id="1_0"></div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
JavaScript
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
el.addEventListener('click', function() {
alert(this.id);
});
});
I think the problem is that your code runs before the document is fully loaded. To run your code after page is loaded add event listener for 'DOMContentLoaded' event:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
el.addEventListener('click', function() {
alert(this.id);
});
});
});
https://codepen.io/mikhailsidorov/pen/BaoPKoX
two options add content like so
<section>
<div id="0_0">content</div>
<div id="0_1">content</div>
<div id="0_2">content</div>
<div id="0_3">content</div>
<div id="1_0">content</div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
or use css by adding a class .content to all your divs :
.content{
height: 10px;
width:10px;
}
Something like this should work. Also, make sure your script is being executed after the page loads, not before. Use the defer tag on your <script> element or move the <script> element to the end of your body.
[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
div.addEventListener('click', (event) => {
alert(event.currentTarget.id);
});
});
In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").toggle("hover");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I have a simple button i.e. Sent. Now, What I actually want when I hover on Sent button then It show div i.e. <div class="drop"> but it hide when I move cursor from Sent button to <div class="drop">.
Now, I want stay on <div class="drop"> when hover on Sent if I remove my mouse from <div class="drop"> it will hide again. So, How can I do this? Please help me.
Thank You
you can try below code where show drop when hover on sent button. On hover of drop do nothing but hide it when you leave drop
$(document).ready(function () {
$(".req_sent").hover(function(){
$(".drop").show();
});
$(".drop").hover(function(){
//do nothing
}, function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
Here you go
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
</div>
<script>
$(document).ready(function () {
$(".profile_btnn").hover(function(){
$(".drop").toggle("hover");
});
});
</script>
You want to keep, visible div event mouse out from Sent button. And hide when its mouse over on div
Just don't use toggle() and apply show() to get it done.
Please check below code:
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").show('slow');
});
$(".drop").hover(function () {
$(".drop").hide('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
Is there a simple way of putting the text of a div in another div on click? I did it before with inputs, but I used .val().
<div id="someText"> Hello </div>
<div id="putHere"> </div>
I'm glad for help, Thanks!
You are looking for .text():
$(document).ready(function() {
$('#click,#div2').on('click',function() {
$('#div2').text($('#div1').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Foo</div>
<div id="div2">Bar</div>
<button id="click">Click</button>
This is a pure Javascript solution if you are interested :
document.getElementById('someText').onclick = function(){
document.getElementById('putHere').textContent = document.getElementById('someText').textContent;
};
<div style='background:red' id="someText"> Hello </div>
<div style='background:blue' id="putHere"> </div>
Update: Removed Button since the OP didn't need one. Now click on the red div and blue div will be populated
With jQuery !
Click Event on div
$(document).ready(function (){
$("#someText").on("click", function (){
$("#putHere").text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Click Me! </div>
<div id="putHere"> </div>
Click Event on Button
$(document).ready(function (){
$("#btn").on("click", function (){
$("#putHere").text($("#someText").text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Hello World! </div>
<div id="putHere"> </div>
<button id="btn">Click ME !</button>
Pure JS
Click Event on button
document.getElementById("btn").onclick = function() {
document.getElementById("putHere").innerHTML = document.getElementById("someText").innerHTML;
};
<div id="someText">Hello World!</div>
<div id="putHere"></div>
<button id="btn">Click ME !</button>
Click Event on div
document.getElementById("someText").onclick = function() {
document.getElementById("putHere").innerHTML = document.getElementById("someText").innerHTML;
};
<div id="someText">Click Me!</div>
<div id="putHere"></div>
This should work
$('#putHere').text($('#someText').text());
$("button").click(function() {
$("#putHere").html($("#someText").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Hello </div>
<div id="putHere"> </div>
<button>Click</button>
See Here i create my css file for show paragraph
<div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" >photos</div>
<div id="rates" >Rates and Reviews</div>
</div>
see here, describe jquery code. please help in implements
<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
toggle() function is what you need to show or hide specific element.
.toggleClass only add or remove specific class but it will not work for adding hidden and show class at same time
Replace $(target).toggleClass('hidden show'); with $(target).toggle();
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$('#mainDiv').find('a').removeClass("active");
$(this).addClass('active');
$("#detailsDiv").children().hide();
$(target).toggle();
});
});
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv"><div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" id="detailsDiv" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" style="display: none;">photos</div>
<div id="rates" style="display: none;">Rates and Reviews</div>
</div>