在div中更改動態生成的文本框的內容

我有一個系統，當按下按鈕時，在屏幕左側創建一個文本框並將其包圍在一個div中。每個新的文本框命名爲textbox1,2等。我想要做的是當用戶點擊圍繞它的div，然後文本框替換屏幕右側的按鈕，用戶可以鍵入到新生成的文本框它也應填充屏幕左側的文本框。我想這樣做的原因是因爲左側的文本框不可編輯，除非用戶點擊div並編輯右側的框。我似乎無法弄清楚如何去做。在div中更改動態生成的文本框的內容

請原諒在遺失標籤等任何錯誤，因爲這是一個嚴格編輯的版本。在查看下面的代碼之前，您可能想看看我設置的演示。 http://jsfiddle.net/JHmaV/335/。

下面是HTML代碼

<html> 
<body> 
    <table width ="100%" alight="right"> 
     <td width ="51.5%"></td> 
     <td> <div id="addField" class="tabOptions">Add field</div></td> 
    </table> 

    <table align ="left"style="background-color: white" width="100%"> 


    </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 = 0; 
var textBoxCounter = 1; 
var tempStorage = $('div#placeholder').html(); 



function setValue(target) { 

    $("textBox1").replaceWith("<h2><input type='text' onkeydown='setValue(this)' value='"+ target.value +"' id='" + target.id +"' name='" + target.id +"')'></h2>"); 

    target.value = target.value; 
} 
function changeHeader(target) { 

    if(target.id == "formNameChange"){ 
     $('h2').replaceWith('<h2>' +target.value + '</h2>'); 
    } 
    else{ 
     $('h4').replaceWith('<h4>' +target.value + '</h4>'); 
    } 
} 

$(document).ready(function() { 

    $("#addField").live('click','div',function(){    
     $('div#placeholder').html(tempStorage); 
    }); 

    $('#textBox1').live('keyup',function() { 

     alert("TESTING"); 
    }); 
    $('#textBox1').live('keypress',function() 
    { 
     $('textBox1').val('Changed Value'); 
     alert('test'); 
    }); 
    $('#textBox1').live('onFocus',function() 
    { 

     alert('test'); 
    }); 
    $(".container").live('click','div',function(){ 

     var divID = this.id; 
     if(divID != ""){ 
      var lastChar = divID.substr(divID.length - 1); 
      var content = document.getElementById(divID).outerHTML; 
      var text = document.getElementById(divID).innerHTML; 
      var textboxId = $('div.container') 
      .find('input[type="text"]')[lastChar] 
      .id; 
      $('div#placeholder').html(content); 
           alert(textboxId); 
     } 
     else{ 

     } 
    }); 

    $('#textAdd').live('click',function() { 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + counter + "' class='container'><li><input type='text' onkeydown='setValue(this)' id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>"; 
     document.getElementById("identifier").appendChild(newdiv); 
     textBoxCounter++ 
     counter++; 
    }); 
});

請注意，我使用jQuery 1.4.4。我曾多次嘗試過，但無法正確執行。任何幫助將不勝感激，提前謝謝。保羅。

來源

2012-07-16 Chaney

您發佈的內容存在很多問題。我不明白你在做什麼，可以解決所有問題，但以下是我發現可能導致至少一些（如果不是全部）問題的：

元素ID中不能有空格。這不是有效的HTML。
您最終會得到兩個具有相同ID的輸入（左邊的那個，然後在左邊的文本框中單擊時出現在右邊的輸入）。這會導致你通過$（'＃myId'）設置的任何事件，live也被綁定到這個新創建的文本框。
如果你的元素具有相同的ID（如我上面所說）。這不是有效的HTML。

編輯：

這裏是一個的jsfiddle，做你要找的（我覺得哈！）什麼。我稍微修改了一下你的代碼以使其起作用，但它應該是非常自我解釋的。當您關注文本框時，我會創建一個新文檔框，設置一些鏈接回原始文本框的數據屬性，然後爲文本框設置實時事件偵聽器。當一個鍵盤發生時，我找出與您輸入的文字框相關的文本框並更新它的值。

有意義嗎？

應該指出，這不是最清潔的解決方案，因爲代碼有點雜亂（可以清理乾淨）。然而，這應該讓你開始有效的路徑。我將離開了重構你:)

http://jsfiddle.net/JHmaV/338/

來源

2012-07-16 16:17:23

的空間更加公正，來自全國各地複製錯誤。是的，這就是我打算用同樣的名字。我希望用戶將文本輸入到應該複製到舊文本框中的新創建的框中。我應該創建一個新的文本框並嘗試以這種方式複製內容嗎？我能看到的唯一問題是跟蹤左側的框，而右側的框正在被編輯，以便內容同時改變。對不起，如果我沒有得到有效的需要。謝謝回覆！ – Chaney 2012-07-16 16:49:31

@Chaney用解決方案更新了我的帖子:) – 2012-07-16 17:25:09

非常好！非常感謝你，先生，這正是我需要的！謝謝！ – Chaney 2012-07-16 17:38:36

在div中更改動態生成的文本框的內容

回答

相關問題