2016-11-22 1 views
0

다음 버튼을 클릭하면 동적 HTML을 생성하기 위해 복제본을 사용하고 있습니다. 다음은 동일한 HTML입니다. 동적 HTML을 생성하는 동안 Jquery Clone에서 값을 설정하는 방법

<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button"> 

<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate"> 

<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button"> 
<input type="text" name="txtExtEmail" class="ExtEmailClass" value="" placeholder="Email" /></div> 

<div id="EmailContainer"> </div> 

그리고 다음

내가 @ twor " [email protected]"을, "가정 해 봅시다 각각의 이메일 ID로 가정 해 봅시다 2 텍스트 상자를 생성 할 필요가 버튼의 클릭에 이제 스크립트

$(document).ready(function() { 
$('#AddExtEmail').click(function() { 
       $('<div/>', { 
        'class': 'ExtAddEmail', html: GetHtmlForEmail() 
       }).hide().appendTo('#EmailContainer').slideDown('slow'); 
      }); 
    }); 

    function setEmailValues() { 

       $('<div/>', { 
        'class': 'ExtAddEmail', html: GetHtmlForEmail() 
       }).hide().appendTo('#EmailContainer').slideDown('slow'); 
     } 

function GetHtmlForEmail() 
     { 
      var len = $('.ExtAddEmail').length; 

      var emailValue = '[email protected],[email protected]'; 
      var emaiArray = emailValue.split(","); 


      var $html = $('.ExtAddEmailTemplate').clone(); 
      $html.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len; 


      return $html.html(); 
     } 

입니다 two.com "

이제 내 문제는 내가 다음 내가 시도했던 HTML 를 생성하는 동안 값을 설정할 수 없습니다 오전입니다

$ html.find ('[type = text]') [0] .val ('[email protected] '); 클래스, 텍스트 등을 사용하여 찾기를 시도했지만 값을 설정할 수 없습니다.

또한 텍스트 상자의 값을 설정할 수 있다면 드롭 다운의 값을 설정할 수 있다고 가정하고 드롭 다운의 값을 설정해야합니다. 나는 HTML 후에 그것을 할 수 있어요

$('#EmailContainer .ExtEmailClass').each(function() { 
     this.value = '[email protected]'; 
    }); 

을 생성하지만, HTML을 생성하는 가장 적합한 솔루션입니다 동안 우리가 값을 설정할 수 있는지 생각하기.

감사

답변

1

당신은 완벽하게 작동하고 아래의 코드, 내가 jQuery를 사용하여 요소의 attr("value",emaiArray[0]); 속성을 사용하여 값을 설정하고 그것이

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Tring Reset</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button"> 
 

 
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate"> 
 

 
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button"> 
 
<input type="text" name="txtExtEmail" class="ExtEmailClass" placeholder="Email" /></div> 
 
<input type="button" id="AddExtEmail" value="+"/> 
 
<div id="EmailContainer"> </div> \t 
 
<script> 
 
$(document).ready(function() { 
 
\t $('#AddExtEmail').click(function() { 
 
\t     $('<div/>', { 
 
\t      'class': 'ExtAddEmail', html: GetHtmlForEmail() 
 
\t     }).hide().appendTo('#EmailContainer').slideDown('slow'); 
 
\t    }); 
 
\t  }); 
 

 
\t  function setEmailValues() { 
 

 
\t    $('<div/>', { 
 
\t      'class': 'ExtAddEmail', html: GetHtmlForEmail() 
 
\t     }).hide().appendTo('#EmailContainer').slideDown('slow'); 
 
\t   } 
 

 
\t function GetHtmlForEmail() 
 
\t   { 
 
\t    var len = $('.ExtAddEmail').length; 
 

 
\t   var emailValue = '[email protected],[email protected]'; 
 
\t    var emaiArray = emailValue.split(","); 
 

 

 
\t    var $tryiy = $('.ExtAddEmailTemplate').clone(); 
 
\t    $tryiy.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len; 
 
\t    $tryiy.find('[name=txtExtEmail'+len+']').attr("value",emaiArray[0]); 
 

 
\t    return $tryiy.html(); 
 
\t   } 
 
</script> 
 
</body> 
 
</html>
을 사용할 수 있습니다 잘 작동

+0

답장을 보내 주셔서 감사합니다. dropdow도 선택해 주실 수 있습니까?), 고맙습니다> $ html.find ('[id = <% = ddlPhontType.ClientID %>'+ len + ']') –

+0

이 부분은 <% = ddlPhontType.ClientID %>로 전달됩니까? id 속성? – GraveyardQueen

관련 문제