Jump to content

[SOLVED] jQuery: Adding event to dymanically added element


GingerRobot

Recommended Posts

Ok, so i'm very new with jQuery and my javascript's a bit rusty. In an attempt to learn how to use jQuery a bit, i thought i'd try and create a form where new text fields are added once the others have already been used. Here's the HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.listen.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form id="theform">
<input type="button" value="Add" name="add" id="add" /> <br />
<input type="password" name="password" id="password" /> <br />
<div id ="container[]">Input 1: <input type="text" name="input[]"/></div>
<div id ="container[]">Input 2: <input type="text" name="input[]"/></div>
<div id ="container[]">Input 3: <input type="text" name="input[]"/></div>
</form>
</body>
</html>

(The button and password field were just there to practice with selectors)

 

And my first attempt at the jQuery/Javascript:

 

jQuery(document).ready(function(){
$("#theform  input[type=text]").keypress(function(){
	var n = $("#theform  input[type=text]").size();
	n++;
	var m = $("#theform  input[type=text][value='']").size();
	if(m==0){
		$("#theform").append("<div id =\"container[]\">Input "+ n +": <input type=\"text\" name=\"input[]\" /></div>");
	}
});
});

 

Now, the problem is that the keypress event isn't added for the dynamically added text fields. That is, once the first 3 text fields have something in them, a 4th is added. When you type something into the 4th, nothing happens -- until you type something in one of the first 3 fields, at which point a 5th text field is added.

 

After a bit of Googling, a suggestion was the listen/intercept plugins. So i gave this a go:

 

jQuery(document).ready(function(){
$("#theform  input[type=text]").listen('keypress','', function(){
	var n = $("#theform  input[type=text]").size() + 1;
	var m = $("#theform  input[type=text][value='']").size();
	if(m==0){
		$("#theform").append("<div id =\"container[]\">Input "+ n +": <input type=\"text\" name=\"input[]\" /></div>");
	}
});
});

 

But the result is the same.

 

Any help would be much appreciated.

All you needed is the live() function ;)

 

read the comments for explanation

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript" >
jQuery(document).ready(function(){
    
    // add listener to text input elements (even new created ones using live())
    $("#theform  input[type=text]").live('keyup',function(){


// fetch all the text input elements
var inputElements=$("#theform  input[type=text]");


// boolean to see if all elements have values
var allElementsFilled=true;
jQuery.each(inputElements, function() {
    console.log(this.value);
    if(this.value==""){
	allElementsFilled=false;
    }
});

// count the amount of input elements
var elementCount=inputElements.length;

// add a new text input when all are filled
if(allElementsFilled){
    $("#theform").append("<div id =\"container[]\">Input "+elementCount+": <input type=\"text\" name=\"input[]\" /></div>");
}

    });
});
</script>
</head>
<body>

<form id="theform">

<div id ="container[]">Input 1: <input type="text" name="input[]"/></div>
<div id ="container[]">Input 2: <input type="text" name="input[]"/></div>
<div id ="container[]">Input 3: <input type="text" name="input[]"/></div>
</form>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.