在div标签之间切换会破坏我的代码
问题描述:
我一直在研究一个项目,并且需要学习jQuery来完成它。对于初学者来说,学习并不是一件容易的事情。无论如何,我一直试图有几个div标签之间切换取决于用户点击了哪一个。在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>
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++;
});
});
答
变化
$('#textAdd').click(function()
到
$('#textAdd').live('click',function() {
,它工作正常.. working example here
几件事情....
您使用的是很旧版本的jQuery - 1.4.4。我建议,如果你要学习新的东西,你了解到最新发布....并在最新版本中的live()
功能已被替换on()
- 让你的代码看起来像这样:
$(document).on('click','#textAdd',function() {
凡document
是页面加载中的任何父元素
嗯,它适用于我。它有一个单击按钮,单击它时会添加一个文本字段,除非您首先单击任何其他选项卡。 – Chaney 2012-07-13 11:35:57
@Chaney关于jsfiddle的新闻更新 – qwertymk 2012-07-13 11:36:28
很酷,我按更新,这里是链接http://jsfiddle.net/9acEk/8/对不起,所有这些东西的新手。 – Chaney 2012-07-13 11:38:55