i have 2 div elements, and if i click on the first div then should the other div which is inside of the clicked div displayed, but i can't understand who it works, my jquery code is so:
jQuery('.infobutton').click(function(){
var clickedID = jQuery(this).attr('id');
jQuery(clickedID).children('div').toggle();
});
<div class="infobutton" id="infobtn1">
<div class="content">some content</div>
</div>
I get everytime right id, i tried also with .first(), .parent(), .children('.content')
It's possible to do this with jQuery?
Let's presume you have HTML like this:
<div id="container" class="infobutton">
Some content
<div>Some other content</div>
</div>
Now let's walk through your Javascript:
jQuery('.infobutton').click(function(){
Find elements with the class infobutton and assign a click handler. This works fine.
var clickedID = jQuery(this).attr('id');
Put the id of that element in the variable clickedID. The value of clickedID is now container.
jQuery(clickedID).children('div').toggle();
Run the jQuery selector on clickedID. Here we have the problem. This can be boiled down to jQuery('container'). This looks for an element with the tag name container, not with the ID container.
In fact, the solution to all of this is not to use the ID at all. Instead, you can build the jQuery object with this, which is a reference to the clicked element:
jQuery('.infobutton').click(function(){
jQuery(this).children('div').toggle();
});
Inside the event handler this will refer the element to which the handler was attached to
jQuery('.infobutton').click(function(){
jQuery(this).children('.content').toggle();
});
Demo: Fiddle
Use this
jQuery('.infobutton').click(function(){
jQuery(this).children('.content').toggle();
});
this refers to the current element inside the event .
your code will work as
use jQuery('#'+clickedID) instead of jQuery(clickedID)
Related
Is there any difference between a div cloned and a div generated in a loop ?
I have two situations:
div 1 :
$('.div1').clone(true).insertAfter('.created_form');
div 2 :
loop
<div class="div2"></div>
endloop
I have a button in each div, to delete the div when the button is pressed.
But the button for delete work only for the cloned div (div1).
For div 2 is not working.
My code for deleting the div is :
$('.buttons').on('click', '.minus_sign', function() {
var parent_id = $(this).parent().attr('id');
$("#"+parent_id).remove();
$("input[name='"+parent_id+"']").remove();
});
Can someone tell me why this is not working for both please ? I mention that the div is exaclty the same, only the id is different! Thank you
That's because the one created without the clone doesn't have an id attribute.
<div class="div2"></div>
However, if you were give it an id:
<div id="myDiv" class="div2"></div>
it would work.
Assuming the original element had an id attribute, the one you're creating inside the loop doesn't have an id attribute as mentioned in this answer.
Even if it has one, since you're using .clone(true), the clone will have the data and event handlers of the cloned element.
But the one created inside loop does not contain the event handler.
And the event delegation will not work since you're delegating the click of .minus_sign to the button which is also dynamically created.
You should delegate the event handler to a static element, for example
$(document).on('click', '.buttons .minus_sign', function() {
var parent_id = $(this).parent().attr('id');
$("#"+parent_id).remove();
$("input[name='"+parent_id+"']").remove();
});
BTW, Since remove() method returns the removed element, you can do the above like
$(document).on('click', '.buttons .minus_sign', function() {
var parent_id = $(this).parent().remove().attr('id');
$("input[name='"+parent_id+"']").remove();
});
I'm thinking if I override a div's html with the jQuery html() method all 'old' DOM elements and all listeners removed from the memory?
For example:
HTML:
<div id='aDiv'>
<div id='anANotherDiv'>An Another Div</div>
</div>
Javascript:
$('anANotherDiv').click(function(){
var b='An Another Div'
console.log(b);
});
$('#aDiv').html('<div id='oDiv'>This div override the another</div>');
$('#oDiv').click(function(){
var a='This div override the another';
console.log(a);
});
So when I overrid the old the GC will be delete the old DOM elements and listeners?
Okay !! Lets start from this way .
Here is your HTML
<div id='aDiv'>
<div id='anANotherDiv'>An Another Div</div>
</div>
Now aDiv is containing only one div as it's child and it is anANotherDiv . Now when you go for this on your console
$("#adIV").html();
The console output will be
<div id='anANotherDiv'>An Another Div</div>
Now when you go for something like this on your console
$('#aDiv').html('<div id=\"oDiv\">This div override the another</div>');
The console output will be only
<div id="oDiv">This div override the another</div>
You are actually manipulating completely the entire aDiv strucuture . .html() basically changes the HTML structure . So you need to make sure whether you want to completely change the HTML structure of a particular element or node or you just have to append or do some other stuffs
Hope I am clear to you .
Cheers !!
You can use on method from jQuery, you can use it to bind the event with reference to parent element so even if you change the actual target DIV's content, event will get attached as we have bind event with reference to parent element.
//Example:
<div id='aDiv'>
<div id='anANotherDiv'>An Another Div</div>
</div>
$(function(){
$("#aDiv").on("click", "div", function(){
var a='This div override the another';
console.log(a);
});
});
To solve event listeners problem, I usually use "global click" approach (JSFiddle):
HTML
<div id="div1" data-clickable>
Parent Click
<div id="div2" data-clickable>
Child ClickClicks
</div>
</div>
JS
$(document.body).click(function(e){
var n="[data-clickable]", $t = $(e.target).is(n) ? $(e.target) : $(e.target).parents(n+":first");
switch ($t.attr('id')){
case 'div1':
console.debug("DIV1 clicked");
break;
case 'div2':
console.debug("DIV2 clicked");
break;
}
});
It listens to body's clicks, and then decides if that was the click we are waiting for.
As for elements replacement problem, there is nothing you can do. You have to come up with some other approach rather than .html()
I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.
$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).
$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')
.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');
you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/
i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3
You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/
This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)
You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});
How to get the pointed item with jquery.I mean by pointed item, if the mouse click on some div in the body, i want to get that div's info , or click on a select box or etc.. so they are no tchoasen by me, the selected items are all html elements in the web, just i want to recieve the info of the element witch i have been clicked on.
$(document.body).click(function(ev) {
$(ev.target); // is the clicked element
});
Live Example
ev.target .click
http://api.jquery.com/category/events/event-object/
http://api.jquery.com/event.currentTarget/
Hmm, I am not sure if I understand your question but are you are refering to .html() method. The examples below will pop up the div's content upon click or hover.
Example
<div id='test'>Content of div</div>
//on click
$('#.test').click(function(){
alert($(this).html());
});
//on hover
$('#.test').hover(function(){
alert($(this).html());
});
Assume you have a div having id 'test' inside your body element. Register event by jQuery as:
$("div#test").click(function(event){
alert(event.target);
/*here event is the object fired, and target is the Div element i.e. source or you can use 'this' to refer to Div element*/
alert(this);
// Here 'event.target' and 'this' will give the same Div element.
});