在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標籤之間切換會破壞我的代碼

回答

相關問題