Is it possible to append something to a div that was already appended? I tried but nothing happens.. (I'm not using linebreaks in the actual js)
$(document).ready(function() {
$('.add_text_input').click(function() {
$('li').append('<div class="input_label">Untitled</div>\
<div class="edit_label"></div>\
<input type="text" name="untitled" /><br />');
});
$('.input_label').click(function() {
var input_label = $(this).html();
$(this).hide();
$('.edit_label').append('<input type="text" name="untitled" value="' + input_label + '"/><br />');
});
});
The js is for creating text inputs and editing their labels. When clicking on the "input_label" div, it should hide using hide() and append a text input with the default "untitled" value in the "edit_label" div. It works if the divs already exist but I need to make it work via append.
Does anyone have any ideas please?
You just need to use a .live() handler here, like this:
$('.input_label').live('click', function() {
var input_label = $(this).html();
$(this).hide().next('.edit_label')
.append('<input type="text" name="untitled" value="' + input_label + '"/><br />');
});
This will work on elements regardless of when they're created, since it works off event bubbling, it'll work on any element's click event that matches the .input_label selector.
Currently with .click() it's finding all the elements that exist at document.ready time and binding to those elements, not to the selector, so it won't work for dynamically added elements.
Related
I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.
var buttonSelect = $(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append(this.value + " ")
}
else {
$(".list").remove(this.value)
}
});
You should rather append the content along with html element like span:
$(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{
$(".list").find('.newval_'+this.value).remove();
}});
The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:
<li class="list">test</li>
Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:
$(".list").remove(":contains('"+this.value+"')");
If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.
$(document).ready(function() {
$("button").click(function() {
$("div").remove(); //remove Div element
});
});
You can see an example here: How to Remove Elements from DOM in jQuery
I am trying to add a click event to a bunch of div elements that I created by appending them and I am having some trouble.
I have a bunch of div elements the with the ids a0 ---> an. I am trying to create a for loop after the divs are created to assign them click events. The issue is the way I am doing it when the click event happens I do not have any way to track which div fired the event. The code bellow might make that more clear. So the issue I am having is that #a + i always returns the last div, and I want it to return the div number that was clicked.
$(document).ready(function () {
traverse(oo);
for (i = 0; i <= groupNum; i += 1) {
$("#a" + i).click(function () {
console.log("#a" + i + "clicked");
});
}
});
I thought about returning a closeur, but that seems I would make it even more complicated. Does anybody have any advice on how to do this the best?
Thanks in advance.
I'm not sure what you are trying to do but if you just want to assign a click event to a bunch of elements then use the correct selector (note the use of $(this) to get the clicked element):
$("div").click(function(){
var clickedDiv = $(this);
var id = clickedDiv.attr("id");
});
If you don't want ALL div elements, then you could add a class to them and use a different selector:
$(".MyDivClass").click(function(){...
or without the class, a 'starts with' on the id (the following with get all div elements where the id attribute starts with "a"):
$("div[id^='a']").click(function(){...
If you are dynamically adding divs with other javascript and you want them to automatically have the click events, use the on function...
$(document).on("click", ".MyDivClass", function(){...
The variable i will, as you noticed, will contains the value set on the last iteration. Change
console.log("#a" + i + "clicked");
by
console.log(this.id + " clicked");
Within the event handler, this is the target DOM element for the event.
You can do it in this way:
$('[id^="a"]').click(function () {
console.log(this.id+" clicked");
});
You may assign a click event to a class instead of to specific ID's and use conditional statements within the click function to do different things base on ID.
$(documnet).ready(function(){
$('.clickclass').click(function(){
/* conditional code here */
});
});
i think, i have all set, but it is still not working - i am appending new html element input with X delete sign. if i click on that newly added X sign, the newly added input should be deleted. what i did is:
function addmore(){
$('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more').find('.del').on('click', function(){
alert('test');
});
}
my html is:
add more
<p id="more"></p>
it is inserting well, but i cannot delete the newly added element (alert is not firing). why is this?
thanks a lot
The .find() function looks for elements that are inside the current set of matched elements, but doesn't include those matched elements. Your <a class="del"> element is part of the set of matched elements so won't be picked up.
Use .filter() instead:
....filter('.del').on('click', function() {...});
Your .find() selector doesn't actually return anything. If you look at how jQuery processes your HTML string:
> $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>')
[<input type="file" name="bild[]">, #text, <a class="del">X</a>, #text, <br>]
You'll see that it's actually parsing each of those elements and text nodes as separate elements in a selector. .find() won't return anything, as it'll look only through the descendants of those elements, not the elements themselves:
> $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').find('.del')
[]
I'd start with something like this:
$('<input type="file" name="bild[]"/>').insertAfter('#more');
$('<a class="del">X</a>').insertAfter('#more').on('click', function(){
alert('test');
});
$('<br/>').insertAfter('#more');
Or make a generic selector from the beginning that automatically handles click events, even for elements that don't exist yet:
$('#more').on('click', '.del', function() {
alert('test');
});
Try this
function addmore(){
var element = $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more');
element.filter(".del").on('click', function(){
alert('test');
});
}
I'm reading the jquery manual regarding the .after() function:
$('.container').after($('h2'));
and it says
"If an element selected this way is inserted elsewhere, it will be
moved rather than cloned"
So if I have multiple
<div class='before' onclick='afterfunction();'><div>,
and I would want to place <div class='after'></div> after whichever div is clicked (have it move, not clone) would I do something like this?
var afterdiv = "<div class='after'></div>";
function afterfunction() {
$(this).after(afterdiv);
}
Thanks for all your help!
Like you said:
An element in the DOM can also be selected and inserted after another element:
$('.container').after($('h2'));
If an element selected this way is inserted elsewhere,
it will be moved rather than cloned:
But you missed the bold part.
$('.before').click(function() {
afterfunction(this);
});
// this will not work cause you'll append a string to your DOM
// var afterdiv = "<div class='after'>ola</div>";
// and will repeatedly be appended after each action.
// instead define your element by wrapping it into a $( )
var afterdiv = $("<div class='after'>ola</div>");
// now 'afterdiv' variable is binded to that element only once inside the DOM
function afterfunction(elem) {
$(elem).after(afterdiv);
}
And you don't need to .remove() it (like wrongly suggested in an answer here.)
demo jsFiddle
Make .before div like this:
<div class='before'><div/>
Then try,
$('.before').on('click', function() {
afterfunction(this);
});
function afterfunction(el) {
var afterdiv = "<div class='after'></div>";
$('.after').remove(); // remove previous `.after`
$(el).after(afterdiv); // add newly after the clicked div
}
DEMO
So I'm adding list elements to a list using .append(). Within the appended element is a div I need to attach the jQuery Slider widget to. Not sure if I have to use .on() or something. FWIW, an unlimited amount of li's can be added, which is why I'm using a class for the div.
Anyway here's a simplified snippet:
$('.cycleDuration').slider();
$cycleBlock += '<li>';
$cycleBlock += '<div class="cycleDuration"></div>';
$cycleBlock += '</li>';
$('#cycles').append($cycleBlock);
You will need to bind the code before the element is actually appended I think. In this example I just bound a click event because I don't have your slider code.
http://jsfiddle.net/4vwUd/1
$('button').click( function() {
//turn your div into a jquery object
var $cycleBlock = $('<div class="cycleDuration"></div>');
//bind the event
$cycleBlock.bind('click', function() { alert(); });
//append to the list
$('#cycles').append('<li />').children('li:last').append($cycleBlock);
});
simply u can re-call " $('.cycleDuration').slider(); " after every appends the list elements, that will bound added class elements to that function.