jQuery 동적 폼 요소

jQuery의 '.live()'이벤트 처리기를 사용하여 간단한 동적 양식을 작성합니다.jQuery 동적 폼 요소

양식은 필요에 따라 확장되고 축소되지만 양식 javascript '.reset'메소드는 부분적으로 만 작동합니다.

첫 번째 두 라디오 버튼 중 하나를 선택하면 (계층 1) 재설정 방법은 두 번째 계층 2 옵션 (tier2Foo1)에서만 작동하지만 두 번째 옵션에서는 선택을 취소해야합니다. 두 번째 (tier2Foo2). 아래

코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Build a Bin</title> 
<style type="text/css"> 
#first { 
    padding-top: 10px; 
    height: 250px; 
} 
#hideFoo { 
    padding-top: 10px; 
    height: 250px; 
    display: none; 
} 
#hideFoo2 { 
    background-color: black; 
    color: white; 
    width: 100px; 
    display: none; 
} 
#first, #hideFoo, #hideFoo2 { 
    margin-bottom: 10px; 
    width: 350px; 
    border: #000 1px solid; 
} 
.fieldContainer { 
    float: left; 
    width: 150px; 
    padding: 0 10px 0; 
} 
.imageContainer { 
    width: 150px; 
    height: 150px; 
    border: solid #666 1px; 
} 



</style> 
<script src="javascript/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    //TIER ONE Options 
    $(document).ready(function() {    
     $('#Foo1').live('click', function() { 
      $('#hideFoo').show(500); 
      $('#hideFoo2').hide(500); 
     }); 
     $('#Foo2').live('click', function() { 
      $('#hideFoo2').show(500); 
      $('#hideFoo').hide(500); 
     }); 
     //uncheck and hide form element 
     //tier 1 reset for tier 2 
     $('#Foo1, #Foo2').live('click', function(){ 
      $('#tier2Foo1, #tier2Foo2')[0].reset(); 
     }) 
    }); 
    </script> 
</head> 
<body> 
<!-- ////////////// Basic form containing two options \\\\\\\\\\\\\\\\\\\\ --> 
<div id="first"> 
    <form id="tier1" action="#"> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>Foo 1</p> 
     <input type="radio" name="example" value="Foo1" id="Foo1" /> 
     <label for="Foo1">Foo 1</label> 
    </div> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>Foo 2</p> 
     <input type="radio" name="example" value="Foo2" id="Foo2" /> 
     <label for="Foo2">Foo 2</label> 
    </div> 
    </form> 
</div> 
<!-- ////////////// tier 2 for Foo1\\\\\\\\\\\\\\\\\\\\ --> 
<div id="hideFoo"> 
    <form id="tier2Foo1" action="#"> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>The complete EcoSort Recycling System.</p> 
     <input type="radio" name="example1" id="Foo1Opt1" /> 
     <label for="Foo1Opt1">Foo One Option 1</label> 
    </div> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>The complete EcoSort Recycling System.</p> 
     <input type="radio" name="example1" id="Foo1Opt2" /> 
     <label for="Foo1Opt2">Foo One Option 2</label> 
    </div> 
    </form> 
</div> 
<!-- ////////////// tier 2 for Foo2 \\\\\\\\\\\\\\\\\\\\ --> 
<div id="hideFoo2"> 
    <form id="tier2Foo2" action="#"> 
    <div> 
     <input type="radio" name="example2" id="Foo2Opt1" /> 
     <label for="Foo2Opt1">Foo Two Option 1</label> 
    </div> 
    <div> 
     <input type="radio" name="example2" id="Foo2Opt2" /> 
     <label for="Foo2Opt2">Foo Two Option 2</label> 
    </div> 
    <div> 
     <input type="radio" name="example2" id="Foo2Opt3" /> 
     <label for="Foo2Opt3">Foo Two Option 3</label> 
    </div> 
    </form> 
</div> 
</body> 
</html>

건배

출처

2013-02-19 Dan382

$('#tier2Foo1, #tier2Foo2')[0].reset();은 컬렉션의 제로 번째 양식을 선택하고, 그래서 당신은 하나 개의 형태로 .reset을 적용하고 있습니다. 이것은 해결하기 위해 매우 간단하다 :

그런데

$('#tier2Foo1, #tier2Foo2').each(function() { this.reset(); });

http://jsfiddle.net/ExplosionPIlls/ruLdA/

이 .live이 jQuery를 1.9에서 제거되었습니다. .on

출처

2013-02-19 12:10:05

스폿이 켜져 있습니다. 고마워. – Dan382

-1

정말 시도하지 않았습니다. 하지만 코드에서 첫 번째 코드 만 선택하는 것 같습니다. 따라서 두 번째 코드는 다시 설정되지 않습니다.

$('#tier2Foo1, #tier2Foo2')[0].reset();

[0]을 삭제 해보세요.

출처

2013-02-19 12:12:18 ipeiro

'.reset'은 jQuery 콜렉션 메소드가 아니므로 작동하지 않습니다. –

@ExplosionPills true, my bad ... – ipeiro

jQuery 동적 폼 요소

답변

관련 문제