在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++; 
    }); 
});

来源

2012-07-13 Chaney

嗯，它适用于我。它有一个单击按钮，单击它时会添加一个文本字段，除非您首先单击任何其他选项卡。 – 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

变化

$('#textAdd').click(function()

到

$('#textAdd').live('click',function() {

，它工作正常.. working example here

几件事情....

您使用的是很旧版本的jQuery - 1.4.4。我建议，如果你要学习新的东西，你了解到最新发布....并在最新版本中的live()功能已被替换on() - 让你的代码看起来像这样：

$(document).on('click','#textAdd',function() {

凡document是页面加载中的任何父元素

Working example here

来源

2012-07-13 11:44:10 ManseUK

优秀，这是一种魅力。非常感谢你的帮助ManseUK – Chaney 2012-07-13 11:45:43

@Chaney没有probs - 我没有更新我的答案...你为什么使用jQuery 1.4.4？ – ManseUK 2012-07-13 11:47:05

我正在使用，因为我加入了一家公司，并为他们工作，因此我必须使用他们正在使用的是1.4.4 lol。我会对老板说，但他目前正在度假，所以我坚持了这一段时间！再次感谢您的帮助！ – Chaney 2012-07-13 11:49:02

在div标签之间切换会破坏我的代码

回答

相关问题