This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have the following setup for a community website:
<div id="posts">
<div class="container">
<div id="placeholder"></div>
<h1>Friend Requests</h1>
</div>
</div>
getRequests.js appends the following into the container div:
<div id="4" class="result">
<a href="user.php?id=4">
<img src="images/user-uploads/profile/?id=4">Random Guy
</a>
<div class="response">
<button data-id="4" class="accept">Accept</button>
<button data-id="4" class="deny">Deny</button>
</div>
</div>
friendResponse.js has the following:
$(function(){
$(".accept").click(function(){
var id = $(this).attr("data-id");
$("#"+id).remove();
});
});
So, you would expect that when I click the accept button, the container with id=1 should get removed, but for some reason, it doesn't.
And also, to add to the peculiarity, the code works if I inject it through the console.
And, for the record, the script is not showing any errors.
Try:
$(function() {
$(document).on("click", ".accept", function() {
var id = $(this).data("id");
$("#"+id).remove();
});
});
Explanation:
You have to set the event for all new incoming node .accept. You have to bound the event on the document. See live event.
Here is the corresponding jsfiddle
Related
This question already has answers here:
Creating an HTML collapse accordion with CSS and JavaScript
(2 answers)
Vanilla Javascript Accordion Functionality
(3 answers)
Only open one accordion tab at one time
(5 answers)
Closed 2 years ago.
I have a list of div elements, each containing a header and a body section. Only the header of each item is initially displayed, and when clicked, the corresponding body should appear below the header. When the header is clicked again, the body should disappear. The logic I use is to append/remove the class name "extended" on each list item, in order to display and hide the body section through CSS.
Now, I am trying to create a dynamic script to allow virtually infinite list entries, without having to target each item specifically, but I cannot get it to work for all items.
HTML
<div class="list-wrapper">
<div class="chapter chapter-1">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
<div class="chapter chapter-2">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
<div class="chapter chapter-3">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
</div>
JavaScript
var chapter = document.getElementsByClassName('chapter')[0];
var chapterHeader = document.getElementsByClassName('chapter-header')[0];
chapterHeader.addEventListener("click", function(){
chapter.classList.toggle("extended");
});
The code above works fine for the first item but obviously not for the rest. Any ideas ? I'm interested in vanilla JavaScript code. Thanks in advance.
You need to use method forEach() to work with a collection of classes. And also method closest(), which allows you to refer to the specified parent of the current element.
Try this it code:
let chapterHeader = document.querySelectorAll('.chapter-header');
chapterHeader.forEach(function(chapterHeader_current, index) {
chapterHeader_current.addEventListener('click', function() {
let current_chapter = this.closest('.chapter');
current_chapter.classList.toggle("extended");
});
});
Event bubbling is the keyword.
Add only one event to the container. When you click on the container it first handles the inner element and then the outer elements.
let list = document.getElementById("myList");
list.addEventListener("click", function(event) {
// Do stuff with target
console.log(event.target.className);
})
<div id="myList" class="list-wrapper">
<div class="chapter chapter-1">
<div class="chapter-header">Chapter header 1</div>
<div class="chapter-body">Chapter body 1</div>
</div>
<div class="chapter chapter-2">
<div class="chapter-header">Chapter header 2</div>
<div class="chapter-body">Chapter body 2</div>
</div>
<div class="chapter chapter-3">
<div class="chapter-header">Chapter header 3</div>
<div class="chapter-body">Chapter body 2</div>
</div>
</div>
something like this i believe
chapterHeader.addEventListener("click", function(this){
this.nextSibling.classList.toggle("extended");
});
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
How can I run the jQuery script for new created DOM elements?
Look at the following code, if I click the class .elem it will run the code, but if I append new .elem the script won't run.
JS:
$('.elem').on('click', function(){
$('.result').show().fadeOut('slow');
});
$('.add').on('click', function(){
$('.block').append('<div class="elem">Element</div>');
});
HTML:
<div class="block">
<div class="elem">Element</div>
<div class="elem">Element</div>
<div class="elem">Element</div>
</div>
<p><span class="add">Add new</span></p>
<div class="result">Result</div>
JSFiddle here: http://jsfiddle.net/3Y3Cn/3/
Any help is hightly appreciated. Thanks you;
Use event delegation with any static parent element:
$('.block').on('click', '.elem', function() {
$('.result').show().fadeOut('slow');
});
DEMO: http://jsfiddle.net/3Y3Cn/4/
You should use event delegation:
$('.block').on('click', '.elem', function(){
$('.result').show().fadeOut('slow');
});
I am searching for much time now, for a very simple and effective way to aasign function on the click of a button in javascript (not jQuery).
The problems that I have are : 1.sometimes the dom is not yet created and the javascript function has undefined vars in it. 2.I can't pass in the right way attributes to this function.
So baically i have these:
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> some data</div>
</div>
</div>
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> other data</div>
</div>
</div>
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> usefull data</div>
</div>
</div>
for (){ assign in each button the onclick function}
function onclick(){
here i want to change the opacity of the image by the class "myimage",
take the innerHTML of the div by the class "data" and do something to it(maybe i ll send an ajax request in this function also)
}
So I need a for loop or something (inside the javascript file maybe), that will asign to all buttons this function. I need every time I click the button, the function to know which button is and what the div by the class "data" has inside.
I tried many ways, each one had problems. Can anyone help with a simple working solution?
Thank you
Since you mention you do not have the skills to do this simple in plain JavaScript, then it is time to get jQuery added to your toolbox.
Here is about all the code you would need
$function() { // when the page is ready
$(".click").on("click", function(e) { // assign a function to ALL class="click"
var id = this.id; // or $(this).attr("id"); - if you need the button's ID
var divContent = $(this).parents().find(".data").html()
$.get("someserver.php",{"id":id,"parm":divContent},function(data) {
alert(data);// from server
});
});
});
try using jquery library :) with that yoy can do codes like
<script>
$(".data").click(function(){
var class_value = $(this).html();
})
</script>
as you can see, the function will be applied to all element having tha class "data"
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
JQuery, is there a way to select all elements on the page with a specific attribute?
My code
<html>
<body>
<script>
$(function(){
$("No idea what to write here").remove();
});
</script>
<button data-fun="a">Remove</button>
<div data-fun="b">Remoave</div>
<span data-fun="c">Remdove</span>
<strong data-fun="d">Rdemove</strong>
<b data-fun="e">Remosve</b>
<p data-fun="f">Remoe</p>
<div>Not Remove</div>
</body>
</html>
I want to remove all the elements that have the data-fun attribute no matter what the element is and value of data-fun is.
You can try this:
$(function() {
$("[data-fun]").remove();
})
Working sample
demo http://jsfiddle.net/JfBvG/
code
$(function(){
$("[data-fun]").remove();
});