/    Sign up×
Community /Pin to ProfileBookmark

Question about dynamic input

Copy linkTweet thisAlerts:
Dec 20.2011

Hi all,

I am sure you all know about adding and removing an attachment when you want to send an email using (let’s say) gmail.

When we press add more attachment, there is a line of element appear. And when we press remove/delete, that new element disappears.

I would like to create the same thing (not exactly the same), but the problem is it seems like the script is not reading any newly created elements. i.e.,

[CODE]$(‘.delete_time_period’).click(function() {
alert(“blah”);
});[/CODE]

does not work because .delete_time_period does not exist when the page loads.

How do I do this correctly? Solutions using PHP are acceptable too.

Regards,
Dhimoet

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@johnWebberDec 20.2011 — Here's the idea. you have to select the element after it exists. So in your click event where the new element appears. Do the selector inside that event.

ex:

The HTML
[CODE]
<a href="#" id="test">test</a>

<span id="fooBar"></span>
[/CODE]

The JS
[CODE]
$(document).ready(function(){

$('#test').click(function(){

//create new DOM element with the click event
var x = $(document.createElement('p'))
.html('new element')
.click(function(){
alert('clicked');
});
//appends it
$('#fooBar')
.append(x);


});

});
[/CODE]

this has been tested on http://jsfiddle.net/
Copy linkTweet thisAlerts:
@bionoidDec 20.2011 — My simple example:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Question about dynamic input - bionoid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

function addItem()
{
var
items = document.getElementById('items'),
item = document.createElement('div'),
remove = document.createElement('button'),
input = document.createElement('input');

item.style.cssText = 'background-color: #aaa; text-align: right; padding: 5px; margin: 5px; position: relative;';
input.style.cssText = 'position: absolute; width: 300px; left: 5px; top: 5px;';
remove.innerHTML = 'Remove';
remove.onclick = function() {item.parentNode.removeChild(item);};

item.appendChild(input);
item.appendChild(remove);
items.appendChild(item);
}

</script>

</head>
<body>

<div style="border: 1px solid #000; margin: 10px;">
<div style="background-color: #eee; padding: 5px;">
<button onclick="addItem();">Add Item</button>
</div>
<div id="items"></div>
</div>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@dhimoetauthorDec 22.2011 — Thank you all for your inputs.

I actually found another way using jquery with live().

I will always refer to this page if I face a similar problem. Unless this thread is gone.. ?
Copy linkTweet thisAlerts:
@aj_nscDec 22.2011 — jQuery is replacing .live() and .die() with .on() and .off()

If you are not using jQuery 1.7+ but greater than 1.4.2 then you should be using jQuery .delegate() instead of live(). live() adds listeners to the window element while delegate() adds listeners to DOM nodes at a lower level so events don't have to bubble all the way up before you capture them (more efficient).
×

Success!

Help @dhimoet spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...