私は最近プロジェクトに取り組んでおり、それを行うには jQuery を学ぶ必要があります。初心者が学ぶのはそれほど簡単なことではありません。とにかく、ユーザーがクリックしたものに応じて切り替えられるいくつかの div タグを使用しようとしています。
最初の「フィールドの追加」は、新しいフィールドを追加するためのボタンを含む div に切り替える必要があります。ここに大量のコードを配置する代わりに、http://jsfiddle.net/9acEk/8/に配置して、動作例、または動作しない例を確認できるようにします。私の問題は、タブを変更して「フィールドの追加」タブをクリックすると、ボタンが機能しなくなることです。ページが開き、クリックするとテキスト ボックスが追加されるボタンが表示されます。ただし、「フィールドの追加」タブをクリックしただけでは、ボタンは何もしません。警告ボックスを使用してコードを表示しましたが、まったく同じです。タブをクリックした後にこれが機能しない理由がわかりません。前述のコードはまったく同じであるため、意味がありません。
質問が意味をなさない場合はお詫びします。質問がある場合は私に尋ねてください。解決するために最善を尽くします。与えられた助けに前もって感謝します。感謝します。
編集：jsfiddleが機能しないようです（それも非常に新しいので申し訳ありません）ので、代わりにここにコードを配置します。
<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>
</p>
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++;
});
});