Divs 내에서 동적으로 생성 된 텍스트 상자의 내용 변경

버튼을 누르면 텍스트 상자가 화면 왼쪽에 생성되고 div에 둘러싸인 시스템이 있습니다. 각각의 새로운 텍스트 상자의 이름은 textbox1,2입니다. 원하는 것은 사용자가 주위의 div를 클릭 한 다음 텍스트 상자가 화면의 오른쪽에있는 버튼을 대체하고 사용자가 새로 생성 된 텍스트 상자에 입력 할 수있는 경우입니다 화면의 왼쪽에도 텍스트 상자를 채 웁니다. 이유는 사용자가 div를 클릭하고 오른쪽의 상자를 편집하지 않으면 왼쪽의 텍스트 상자가 편집 할 수 없기 때문입니다. 나는 그것을하는 방법을 알아낼 수없는 것.Divs 내에서 동적으로 생성 된 텍스트 상자의 내용 변경

태그가 잘못 누락 된 경우이를 용서하십시오. 심각하게 수정 된 버전이므로 기꺼이 보내주십시오. 아래 코드를 살펴보기 전에 내가 설정 한 데모를보고 싶을 수도 있습니다. 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 사용하고 있습니다. 나는 이것에 몇 가지 시도가 있었고 올바르게 할 수 없다. 어떤 도움을 주시면 대단히 감사하겠습니다. 미리 감사드립니다. Paul.

출처

2012-07-16 Chaney

게시 한 항목에 많은 문제가 있습니다. 난 당신이 모든 것을 해결하기 위해 충분히 무슨 일을하는지 이해하지만, 나는 여기가 아마 적어도 일부의 원인 (전부는 아니지만) 문제의 것 무엇을 발견하지 않습니다

이

당신은 요소 ID가 공백을 가질 수 없습니다 . 유효하지 않은 HTML입니다.
동일한 ID (왼쪽 텍스트 상자 안쪽을 클릭하면 왼쪽에있는 입력란과 오른쪽 입력란에 표시되는 입력기)가있는 두 입력이됩니다. 이렇게하면 $ ('# myId'). live를 통해 설정 한 모든 이벤트가이 새로 작성된 텍스트 상자에도 바인딩됩니다.
동일한 ID를 가진 요소 (위에서 말한 것). 유효하지 않은 HTML입니다.

는 편집 :

여기

는 (! 내가 생각 HAH) 무엇을 찾고 있는지 않는다는 jsFiddle이다. 나는 당신의 코드를 약간 수정하여 작동하도록 만들었지 만 꽤 자명하다. 텍스트 상자에 포커스를 맞추면 새 텍스트 상자를 만들고 원래 텍스트 상자에 다시 연결되는 일부 데이터 특성을 설정 한 다음 텍스트 상자에 라이브 이벤트 수신기를 설정합니다. 키 업이 발생하면, 입력하는 것과 관련된 텍스트 상자를 찾아 값을 업데이트합니다.

의미가 있습니까?

코드가 다소 지저분 해 (깨끗하게 정리할 수 있음)이 방법이 가장 깨끗한 해결책이 아니라는 점에 유의해야합니다. 그러나 이것은 작동하는 경로에서 시작해야합니다. 나는 당신까지 리팩토링 :

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

출처

2012-07-16 16:17:23

공간이 더 맞은 편에 복사에서 오류가 있습니다 떠날거야. 그리고 그래, 내가 같은 이름으로 의도 한 것. 이전 텍스트 상자에 복제해야하는 새로 작성된 상자에 텍스트를 입력하길 원합니다. 새 텍스트 상자를 만들어 내용 전체에 복사하려고합니까?내가 볼 수있는 유일한 문제는 내용이 동시에 변경되도록 오른쪽의 상자가 편집되는 동안 왼쪽의 상자를 추적하는 것입니다. 미안 내가 효과적으로 필요한 것을 건너 가지 않을 경우. 답장을 보내 주셔서 감사합니다! – Chaney

@Chaney 솔루션으로 내 게시물을 업데이트했습니다. :) –

우수! 정말 대단히 감사합니다. 정확히 내가 필요한 것입니다! 감사! – Chaney

Divs 내에서 동적으로 생성 된 텍스트 상자의 내용 변경

답변

관련 문제