I have the following simple code, where I double click a div (with class container) and it's simply clones itself inside another div (with id containment-wrapper):
html
<span class="container">div one</span>
<div id="containment-wrapper">
</div>
Jquery
$(".container").dblclick(function() {
$(this).clone().appendTo('#containment-wrapper');
});
When I double click the original div, it clones itself and puts a div inside the containment-wrapper but when I double click a cloned div, it doesn't do anything even though it has class=container, why is this happening? I tried many different ways to clone it but nothing worked.
It's because the event handler isn't cloned. Use delegate instead:
$(".container").delegate("","dblclick",function() {
$(this).clone().appendTo('#containment-wrapper');
});
Because dblclick is not bounded to the new div. What you want to achieve can be easily done with live
$(".container").live('dblclick', function() {
$(this).clone().appendTo('#containment-wrapper');
});
Since you're dynamically adding div tags they aren't automatically bound to the .dblclick function you've specified. Using a live event handler is one way to solve this.
Related
I'm trying to understand why loading HTML into a div block renders its class statement effectively non-existent to a click event.
My HTML code looks like this:
<div id="load-to"></div>
<div id="load-from">
<div class="load-from-css"> Hello!</div>
</div>
<button>load it!</button>
My JS code looks like this:
$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
});
$('.load-from-css').click(function(){
alert('clicked');
});
When I click the button the HTML from the lower div block is loaded into the upper div block, and then the HTML looks like this:
<div id="load-to">
<div class="load-from-css"> Hello!</div>
</div>
<div id="load-from">
<div class="load-from-css"> Hello!</div>
</div>
My question is, why does the second click event (defined in my jQuery code) only work on the original lower "Hello!" div block but not on the loaded upper one, when both have the same class definition?
Other answers have already covered the core reason for your problem (that copying the HTML of an element and placing it elsewhere will create a brand new DOM element and does not copy any events that were bound to the original element... keeping in mind that when you add an event listener, it will only bind to any elements that exist at the time that you do so)
However, I wanted to add some other options for accomplishing what you want to do.
jQuery has a few different techniques that make this sort of thing easy:
.clone() will essentially do the same thing as you are doing now*, it will copy the HTML content and create a new DOM element. However, if you pass true (ie: .clone(true)), it will clone it with all data and events intact.
* note that to truly get the same result as using .html(), you need to do .children().clone(), otherwise you'll get both the inner and outer div.. this may or may not be necessary depending on the use case
ex: https://jsfiddle.net/Lx0973gc/1/
Additionally, if you were in this same situation but did not want to make a clone, and simply wanted to move an element from one place to another, there is another method called .detach() which will remove the element from the DOM, but keep all data and events, allowing you to re-insert it later, in the same state.
ex: https://jsfiddle.net/Lx0973gc/2/ (not the best example because you won't see it move anywhere, but it's doing it!)
As another alternative, you can use delegated event binding, which actually binds the event to a different element (a parent) which you know won't change, but still allows you to target a child element within it:
$('body').on({
'click': function() {
alert('clicked');
}
}, '.load-from-css');
ex: https://jsfiddle.net/Lx0973gc/4/
The $('.load-from-css') finds all elements currently existing and .click(...) attaches a listener to all these elements. This is executed once.
Then you copy the raw html which does not transfer any listeners. The DOM has nodes onto which the listeners are attached but when you copy the plain HTML you essentially create new nodes based on the html.
Because you are copying just the HTML. The js file is loaded at the beginning, when there is just one instance of a div with the "load-from-css" class. You should execute again the code adding the listener after you copy the html. Somethinglike:
$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
$('.load-from-css').click(function(){
alert('clicked');
});
});
#load-to inner HTML is initially empty. so added click listener only for #load-from .load-from-css. Dynamically bind element will not attach the click listener.
jQuery new version have the feature to attach the event for dynamic elements also. Try this
$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
});
$(document).on('click', '.load-from-css', function(){
alert('clicked');
});
Also we can use like this
$( document ).delegate( "load-from-css", "click", function() {
alert( "Clicked!" ); // jQuery 1.4.3+
});
Simply because the page did not refresh. You loaded a content to another content without loading the page, and the browser wont recognized any event added to the loaded element.
What you should do is load your javascript tag with the load along with the content.
Your code should be like this:
<div id="load-to">
<div class="load-from-css"> Hello!</div>
</div>
<div id="load-from">
<div class="load-from-css"> Hello!</div>
<script>$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
});
$('.load-from-css').click(function(){
alert('clicked');
});</script>
</div>
I have a nested div.
The child div is inside the parent div.
How can I distinguish the correct onClick function?
In this case, only the function of parent div is called no matter clicking where I click on the nested div.
<div class="portfo" onclick="showValue()">
<div id="cross" onclick="deleteValue()">
<img src='cross.png' height='15px' width='15px' alt='some'>
</div>
</div>
However, showValue is always called whenever I click on the children div.
delete is a reserved word. Try renaming that function to something else. Then both events should fire when click on the image. First the delete event and then the showval one
I think a library like jQuery can help you out here. Take a look at the .on() method.
I think your problem has to do with Event Propogation. This should help you solve it: Prevent event propogation
Also, delete() is a predefined function in JavaScript, you should rename it to something else, unless you're trying to use the built-in function, in that case, please look at the proper usage: delete
This question already has answers here:
Events triggered by dynamically generated element are not captured by event handler
(5 answers)
Closed 10 years ago.
My problem is rather hard to word. So I have created a jsfiddle.net of my issue.
I have a list of divs. Inside each div there is some text and an "X". The "X" is to delete the parent div. The three divs and "X" works fine. But if I were to add a button that appends a new div to the list, then those "X"'s don't work. Any idea what this problem is? I know this is probably some basic JS DOM thing. But I'm self thought and just don't understand JS very well to resolve this issue.
Please and thank you for your time.
http://jsfiddle.net/JLxKJ/
$("#trigger").click(function() {
$("#participants_wrapper").append("<div class='participant'><a href='javascript:void(0)' class='delete_participant'>X</a>Appended</div>");
return false;
});
$(".delete_participant").click(function(){
$(this).closest('div').remove();
});
<div id="participants_wrapper">
<div class="participant">Xalready here</div>
<div class="participant">Xalready here</div>
<div class="participant">Xalready here</div>
</div>
add this participant
You need to delegate the event to closest existing parent in the dom:
$("#participants_wrapper").on("click", ".delete_participant", function(){
$(this).closest('div').remove();
});
This is because jQuery can't put the click event on the element, as it doesn't exist on page load, so this puts the event on the parent, but affects the children
because you are not binding the events again to the new element.
You can use on() to get around that.
$("#participants_wrapper").on("click", ".delete_participant",
function(){
$(this).closest('div').remove();
}
);
For dynamically added elements, use jQuery's .on() function. Change your delete code to:
$("#participants_wrapper").on('click', '.delete_participant', function () {
$(this).closest('div').remove();
});
jsFiddle example
so i implemented a bit of jQuery that basically toggles content via a slider that was activated by an <a> tag. now thinking about it id rather have the DIV thats holding the link be the link its self.
the jQuery that i am using is sitting in my head looks like this:
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.systems_detail').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
i was using this as a index type box so there are several products when you click on the <a> tag that used to be an image* it would render a bit of content beneath it describing the products details:
<div class="system_box">
<h2>BEE Scorecard database</h2>
<p>________________</p>
</div>
the products details are wrapped in this div.
<div class="systems_detail" id="sms_box">
</div>
so when you click on what used to be a image* it would run the slideonlyone('div_id_name') function. the function above then first closes all the other divs with the class name 'system details' and then opens/slides the div with the id that was passed into the slideonlyone function. that way you can toggle products details and not have them all showing at once.
note i only kept the <a> tag to show you what was in there i will be getting rid of it.
note: i had an idea of just wrapping the whole div in an <a> tag but is that good practice?
So now what i am wondering is since you need JavaScript to run onclick on a div tag how do you write it so that it still runs my slideonlyone function?
Using obtrusive JavaScript (i.e. inline code) as in your example, you can attach the click event handler to the div element with the onclick attribute like so:
<div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
...
</div>
However, the best practice is unobtrusive JavaScript which you can easily achieve by using jQuery's on() method or its shorthand click(). For example:
$(document).ready( function() {
$('.some-class').on('click', slideonlyone('sms_box'));
// OR //
$('.some-class').click(slideonlyone('sms_box'));
});
Inside your handler function (e.g. slideonlyone() in this case) you can reference the element that triggered the event (e.g. the div in this case) with the $(this) object. For example, if you need its ID, you can access it with $(this).attr('id').
EDIT
After reading your comment to #fmsf below, I see you also need to dynamically reference the target element to be toggled. As #fmsf suggests, you can add this information to the div with a data-attribute like so:
<div id="some-id" class="some-class" data-target="sms_box">
...
</div>
To access the element's data-attribute you can use the attr() method as in #fmsf's example, but the best practice is to use jQuery's data() method like so:
function slideonlyone() {
var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
var target_id = $(this).data('target'); // This would be 'sms_box'
...
}
Note how data-target is accessed with data('target'), without the data- prefix. Using data-attributes you can attach all sorts of information to an element and jQuery would automatically add them to the element's data object.
Why do you need to attach it to the HTML? Just bind the function with hover
$("div.system_box").hover(function(){ mousin },
function() { mouseout });
If you do insist to have JS references inside the html, which is usualy a bad idea you can use:
onmouseover="yourJavaScriptCode()"
after topic edit:
<div class="system_box" data-target="sms_box">
...
$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });
You can bind the mouseenter and mouseleave events and jQuery will emulate those where they are not native.
$("div.system_box").on('mouseenter', function(){
//enter
})
.on('mouseleave', function(){
//leave
});
fiddle
note: do not use hover as that is deprecated
There's several things you can improve upon here. To start, there's no reason to use an <a> (anchor) tag since you don't have a link.
Every element can be bound to click and hover events... divs, spans, labels, inputs, etc.
I can't really identify what it is you're trying to do, though. You're mixing the goal with your own implementation and, from what I've seen so far, you're not really sure how to do it. Could you better illustrate what it is you're trying to accomplish?
== EDIT ==
The requirements are still very vague. I've implemented a very quick version of what I'm imagining you're saying ... or something close that illustrates how you might be able to do it. Left me know if I'm on the right track.
http://jsfiddle.net/THEtheChad/j9Ump/
I've looked through some of the other posts but couldn't find an answer, so sorry if this is a somewhat stupid question.
I have a div
which I add span elements dynamically to, like <span id="agolf-squirecreek1.jpg">golf-squirecreek1.jpg</span>. I need to remove these elements dynamically as well when clicked on. I have the click event linked with .live(), but the remove() wont work on it. Any ideas?
Try to use .remove
http://api.jquery.com/remove/
Or
Why dont you hide the element on click using
.hide()
or by putting style or class. .add() or .addClass
or replace the html itself by .html or .text
This will remove a span when clicked within the context of div#id.
$('div#id').delegate('span', 'click', function() {
$(this).remove();
});
If you want to remove everything within an element you can use .empty() and furthermore, if you want to remove a span element but retain its event handlers/data object you can use .detach() which is useful if you intend to add the element back to the DOM.