I have been working on a project recently and have been required to learn jQuery to do it. Not such an easy thing to learn for a beginner ha. Anyway I have been trying to have a few div tags that are switched between depending on which one the user has clicked on.
The first one, “Add field” should switch to a div that contains a button to add a new field. Now instead of putting a large amount of code here I instead put it into http://jsfiddle.net/9acEk/8/ so you could see a working example, or rather not working. My problem is that when I change a tab and click back on “Add field” tab the buttons no longer work. the page opens with a button that when clicked adds a text box. However even if I just click on the “Add field” tab the button no longer does anything, I have used alert boxs to display the code and it is exactly the same. I have no idea why this does not work after clicking on the tab, it makes no sense to me as the code, as mentioned, is exactly the same.
Apologies if the question makes no sense, any questions on it just ask me and I shall do my best to clear it up. Thanks a lot in advance to any help given, it is appreciated.
EDIT:
It seems the jsfiddle does not work(Sorry very new to that as well) so I shall instead put code here.
<html>
<body>
<table width ="100%" alight="right">
<td width ="51.5%"></td>
<td> <div id="addField" class="tabOptions">Add field</div></td>
<td><div id="fieldProperties" class="tabOptions">Field Properties</div></td>
<td> <div id="formProperties" class="tabOptions">Form Properties</div></td>
</table>
<hr>
<table align ="left"style="background-color: white" width="100%">
<tr>
<tr>
<div id="formName" class="formDetails">
<h2>Untitled</h2>
<h4>This is your form description</h4>
</div>
</tr>
<td width ="50%">
<ul id ="firstColumn">
<div id="identifier">
</div>
</ul>
</td>
<td>
<ul id ="secondColumn" width="5%">
<div id="placeholder">
<div id="mainPanel">
<li><input type="button" class="formCreationButton" id="textAdd" value="Single line text" /></li>
</div>
</div>
</ul>
</td>
<tr>
</table>
jQuery
var counter = 1;
var textAreaCounter = 1;
var textBoxCounter = 1;
var tempStorage = $('div#placeholder').html();
$(document).ready(function() {
$(".formDetails").live('click','div',function(){
var divID = this.id;
alert(divID);
alert(document.getElementById(divID).innerHTML);
});
$(".container").live('click','div',function(){
var divID = this.id;
if(divID != ""){
alert(divID);
var content = document.getElementById(divID).outerHTML;
// alert(content);
var text = document.getElementById(divID).innerHTML;
alert(text);
var textboxId = $('div.container')
.find('input[type="text"]')[0]
.id;
$('div#placeholder').html(content);
}
else{
}
});
$("#addField").live('click','div',function(){
$('div#placeholder').html(tempStorage);
});
$("#fieldProperties").live('click','div',function(){
var content = "<p>Content of fields should be here</p>";
$('div#placeholder').html(content);
});
$("#formProperties").live('click','div',function(){
var content = "<p>Content of form should be here</p>";
$('div#placeholder').html(content);
});
$('#textAdd').click(function() {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + textBoxCounter + "' class='container'><li><input type='text' value='TEXT' id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>";
document.getElementById("identifier").appendChild(newdiv);
textBoxCounter++
counter++;
});
});
Change
to
and it works fine .. working example here
A couple of things ….
You are using a very old version of jQuery – 1.4.4. I suggest that if your going to learn something new you learn the latest release …. and in that latest release the
live()function has been replaced byon()– so your code would look like this :Where
documentis any parent element present on page loadWorking example here