I've been looking around but i couldn't find a solution yet.
My code is something like this:
$('#addDiv').click( function() {
var divNum = divNum + 1;
var newdiv = document.createElement('div');
var divIdName = 'mydiv';
newdiv.setAttribute('id',divIdName+divNum);
newdiv.className = 'imgDiv';
});
$('#cont-div').on('click', function(e) {
//REMOVE clicked div
});
I have a div named "cont-div" which contains the dynamically created divs.
Probably the solution is very simple, but I can't find a way to identify the clicked div inside 'cont-div' so I can remove it.
You can use event delegation since the divs are created dynamically:
$('#cont-div').on('click', 'div', function(e) {
//REMOVE clicked div
$(this).remove();
});
$('#cont-div div').on('click', function(e) {
var clickedDiv = e.target;
if(clickedDiv != e.currentTarget)
{
//Remove the clicked div if it is not the parent.
$(this).remove();
}
});
Hmmm, your code implies you may have multiple elements with the same ID. Don't do that, that'll make things harder. Just use the class you have set:
$('.imgDiv').on('click', function() {
$(this).remove();
});
You can use jquery remove() to remove the element. Also you will need a delegate for simply handling events on dynamicly inserted elements.
Working Demo
Html:
<input id="addDiv" type="button" value="click!" />
Javascript:
$(function(){
$('body').on('click','.imgDiv',function(){
$(this).remove();
});
});
EDIT: Shortened down code snippet, now only showing relevant parts.
Related
I'm starting with jquery, and have an issue here:
http://jsfiddle.net/8guzD/
$('#test.off').click(function(){
$(this).removeClass('off').addClass('on');
});
$('#test.on').click(function(){
$(this).removeClass('on').addClass('off');
alert('ok');
});
the first part of the code goes well, the class is apply, but when I attach an event in this element with its new class it won't work.
Can someone explain me what is the problem exactly?
I tried with javascript,
http://jsfiddle.net/R5NRz/
var element = document.getElementById('test');
element.addEventListener('click', function() {
this.id ='test2';
alert("ok");
}, false);
var element2 = document.getElementById('test2');
element2.addEventListener('click', function() {
alert("ok2");
}, false);
and it didn't really help me, having the same issue
try
$(document).on("click",'#test.on',function(){
$(this).removeClass('off').addClass('on');
alert('ok');
});
$(document).on("click",'#test.off',function(){
$(this).removeClass('off').addClass('on');
alert('ok passs');
});
Demo
In your jQuery example you are binding to DOM elements that exist at that time. That is why you see the first fire but not the second. It is not a match for your '#test.on' selector when the code is run. What you want to do instead is use delegation:
$('#test').on('click',function() {
var ele = $(this);
if (ele.hasClass('on')) {
ele.removeClass('on').addClass('off');
} else {
ele.removeClass('off').addClass('on');
}
});
This assumes that you are doing more than just toggling classes. If you want simply toggle classes then an easier solution is to pick one as the default and use the other as a flag. For example, .on is on but without .on it's off. Then you can just use toggle:
$('#test').on('click', function() {
$(this).toggleClass('on');
});
$("#test.on")
Doesn't bind to anything. Try this:
$('#test').click(function() {
if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');
else $(this).removeClass('on').addClass('off');
});
You might consider using an 'active' class instead and just toggling that, instead of have two separate on/off classes. Then you can write:
$("#test").click(function() {
$(this).toggleClass('active');
});
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
I need to move .link-field-first-ticket-button inside .event-location-one
here's the fiddle: http://jsfiddle.net/ksV73/
It's a cms so I have no choice in the matter.
this is what I'm trying, it's not doing much of anything
$(".widget-upcoming-events-blog li").each( function() {
var links = $(this).children(".link-field-first-ticket-button").html();
$(this).children(".link-field-first-ticket-button").html("");
$(this).children(".event-location-one").append(links);
});
You can just do this:
$(".link-field-first-ticket-button").appendTo(".event-location-one");
It will move the first ticket button to event location
x = $(".widget-upcoming-events-blog").find(".link-field-first-ticket-button").remove()
$(".event-location-one").append(x);
The html method will give you the content inside the element, not the element itself.
Just append the element where you want it. As an element can't exist in two places at once, it will be moved:
$(".widget-upcoming-events-blog li").each( function() {
var links = $(this).children(".link-field-first-ticket-button");
$(this).children(".event-location-one").append(links);
});
try this
$(".widget-upcoming-events-blog li").each( function() {
var links = $(".link-field-first-ticket-button").html();
$(".link-field-first-ticket-button").html("");
$(".event-location-one").append(links);
});
Change your .children() to .find()
$(".widget-upcoming-events-blog li").each( function() {
var links = $(this).find(".link-field-first-ticket-button").html();
$(this).find(".link-field-first-ticket-button").html("");
$(this).find(".event-location-one").append(links);
});
How about use the .appendTo() function?
For example:
$(".widget-upcoming-events-blog li").each( function() {
$(this).find(".link-field-first-ticket-button")
.appendTo( $(this).find(".event-location-one") );
});
In my script, I'm attempting to move an element (list) from one parent (just the text) to another and then back again (to the list). The problem is that when I have moved the element back to the original parent (ul), it has become un-clickable. I thought using the detach() over the remove() might do the trick but it doesn't make a difference.
$(document).ready(function() {
$("#inventoryWeapon li").click(function(event) {
var clickedId = event.target.id;
if ($("td#weapon").is(":empty")) {
$("td#weapon").text(clickedId);
$(this).detach();
}
});
$("td#weapon").click(function(event) {
var unequipping = $(this).text();
$("#inventoryWeapon").append("<li id='" + unequipping + "'>" + unequipping + "</li>");
$(this).detach();
});
});
As suggested in the popular comment above, you are not moving the element. To move it, do this.
$("td#weapon").click(function(event) {
$(this).appendTo($("#inventoryWeapon"));
});
You're not moving the element, you're removing the element in one function, and creating a new element with the same ID and content in the other. But the original event handler was only bound to the original element.
If you want your event handler to work with dynamically created elements, use event delegation:
$("#inventoryWeapon").on("click", "li", function(event) {
...
});
Alternatively, you could save the element when you detach it, instead of recreating it:
var savedLI;
$("#inventoryWeapon li").click(function() {
if ($("td#weapon").is(":empty")) {
savedLI = $(this).detach();
$("td#weapon").text(this.id);
}
});
$("td#weapon").click(function() {
if (savedLI) {
$("#inventoryWeapon").append(savedLI);
$(this).detach();
}
});
My goal is to have one element on initial load, this element should have id="something_O", when a add link is clicked, underneath already existing element, new, the same html element should be added,not with id="something_o", but with id="something_1", or last element + 1, to be specific. The user should be able to add these elements infinitely. When the user clicks deleted, element should disappear.
Any ideas?
Here is prepared fiddle for easier help...
var counter = 1;
$('.AddEl').live('click', function () {
var el = $('#element_1').clone().attr('id', 'element_' + ++counter).appendTo('body');
});
$('.RemoveEl').live('click', function () {
var el = $(this).parents('.elem')
if (el.get(0).id !== 'element_1') el.remove();
});
Check this here
One means to do this is:
$(document).ready(function() {
$('body').on('click', '.AddEl', function() {
$('.actions:first')
.parent()
.clone()
.attr('id', 'element_' + $('.actions').length)
.insertAfter($('.actions:last').parent());
});
$('body').on('click', '.RemoveEl', function() {
$(this).closest('.actions').parent().remove();
});
});
JS Fiddle demo.
Please note that I've amended your html so that the first element to be cloned is now id="element_0", and targeted that, and all subsequently-created elements, with the CSS selector:
div[id^=element] {
/* css */
}
This could be simplified, but these are simply my first thoughts.
Edited to offer a slightly improved version, in that the initial addition is slightly, or seems a little, more concise, and also features a means to prevent duplicate ids being generated if elements are added/removed:
$(document).ready(function() {
$('body').on('click', '.AddEl', function() {
var $elems = $('.actions').parent();
$elems
.first()
.clone()
.insertAfter($elems.last());
$('div[id^="element_"]').each(
function(i){
$(this).attr('id','element_' + i);
});
});
$('body').on('click', '.RemoveEl', function() {
$(this).closest('.actions').parent().remove();
});
});
JS Fiddle demo.
I just overwrite to your code.
You can try this, may something you want.
http://jsfiddle.net/kongkannika/QeSPP/34/