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');
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Here I have an example:
$('#key').on('click', function(){
$('.task').html("<button id='key'>Button</button>"+Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
</div>
How I can apply javascript for overwriting element and get different time for each button press?
Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.
$('#key').on('click', function(){
$('.datestr').html(Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
<span class='datestr'></span>
</div>
This question already has an answer here:
.click() event when 'Open in new tab/window'
(1 answer)
Closed 5 years ago.
html code:
<div class="dummy">
test
</div>
javascript Code:
$('.dummy').on('click',function(e){
alert('good moring');
});
The above javascript code is not executing if i open the link in new tab,can someone help me out..
You have a a element inside your DIV. SO in order to have your alert just prevent the default action of anchor element using
e.preventDefault();
Read more on event.preventDefault()
$('.dummy').on('click', function(e) {
e.preventDefault();
alert('good moring');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">
test
</div>
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
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
My dynamic posts are added by .load() and they enter the DOM as such:
<div class="post">
<h2>Basic Info</h2><button class="closer">X</button>
<div class="innerPost">
<h5>Notes:</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
My jQuery to remove the the post works on the static first post on the page but not the newly added dynamic ones. Here is the jQuery:
$(".closer").on('click', function() {
$(this).parent().remove();
});
I've been trying different selectors and reviewing similar problems from other people but still can't seem to get it work. Any help is much appreciated :)
This is because the elements are not in the DOM when the selector is run. Use event delegation.
$(document).on('click', ".closer", function() {
$(this).parent().remove();
});
This question already has answers here:
How to wrap an existing element with another one in jQuery?
(5 answers)
Closed 8 years ago.
I was wondering was it possible to append an element using jquery to be a parent.
Imagine I had this on my page:
<div id="inner">
</div>
And I wanted to put #inner inside another div #outer with jquery after some kind of event.
The result would be:
<div id="outer"> - This element was appended with JQUERY
<div id="inner">
</div>
</div>
Not sure that this is possible. Any help appreciated.
see this http://api.jquery.com/wrap/
$('#inner').wrap('<div id="outer"></div>')
$('#inner').wrap('<div id="outer"></div');
should do it.
what you need is the wrap function:
$('#inner').wrap('<div id="outer"></div>');
$('#inner').before(' - this element was appended with jQuery');
The wrap function should do the trick :)
var mkup = '<div id="outer"></div>';
$('#inner').wrap('<div id="outer"></div');
It is definitely possible in jQuery.
Please have a look on the jQuery API -> .wrap():
http://api.jquery.com/wrap/
$("#inner").wrap('<div id="outer" style="background-color: #ddd"></div>');
Example:
http://jsfiddle.net/QL79C/1/
Hope this helps!