jQuery Content Switcher (연락처 양식 작업을 내부에서 할 수 없음)

Question

이것을 사용하려고합니다. content switcher.

연락처 양식을 숨겨진 div 안에 넣으면 작동하지 않습니다. 콘텐츠 전환기 외부에 배치하면 작동합니다.

스위처 jquery 코드로 인해 가져올 소스 HTML이 없으므로 작동하지 않는 것으로 알고 있습니다. 하지만 실제로 스위처 안에서 작동시켜야합니다. 그것을 작동시키는 어떤 방법이 있습니까?

는

html로 :

<div id="content3-content" class="message switcher-content">     
<p class="medium">Contact Form</p> 
<form class="contact" id="contact"> 
<div class="form"> 
<input type="text" name="name" placeholder="Name" id="contactname" /> 
<input type="text" name="email" placeholder="Email" id="contactemail" /> 
<textarea name="message" placeholder="Message" id="contactmessage"></textarea> 
<button>Send</button> 
</div> 
</form> 
</div> 

내용 스위처 JS : 여기

/* jQuery Content Panel Switcher JS - v1.1 */ 
    var jcps = {}; 
    jcps.fader = function(speed, target, panel) { 
    jcps.show(target, panel); 
    if (panel == null) {panel = ''}; 
    $('.switcher' + panel).click(function() { 
     var _contentId = '#' + $(this).attr('id') + '-content'; 
     var _content = $(_contentId).html(); 
     if (speed == 0) { 
      $(target).html(_content); 
     } 
     else { 
      $(target).fadeToggle(speed, function() {$(this).html(_content);}).fadeToggle(speed); 
     } 
    }); 
}; 
jcps.slider = function(speed, target, panel) { 
    jcps.show(target, panel); 
    if (panel == null) {panel = ''}; 
    $('.switcher' + panel).click(function() { 
     var _contentId = '#' + $(this).attr('id') + '-content'; 
     var _content = $(_contentId).html(); 
     if (speed == 0) { 
      $(target).html(_content); 
     } 
     else { 
      $(target).slideToggle(speed, function(){$(this).html(_content);}).slideToggle(speed); 
     } 
    }); 
}; 
jcps.show = function (target, panel) { 
$('.show').each(function() { 
    if (panel == null) { 
     $(target).append($(this).html() + '<br/>'); 
    } 
    else { 
     var trimPanel = panel.replace('.', ''); 
     if ($(this).hasClass(trimPanel) == true){$(target).append($(this).html() + '<br/>');} 
    } 
}); 
} 

Answer 1

가하는 FIDDLE의 당신이 원하는 무엇이다?

<a href="#" id="content1" class="switcher">Content 1</a> 
<a href="#" id="content2" class="switcher">Content 2</a> 
<a href="#" id="content3" class="switcher">Content 3</a> 

<div id="switcher-panel"></div> 

<div id="content1-content" class="switcher-content show">Content 1</div> 

<div id="content2-content" class="switcher-content">Content 2</div> 

<div id="content3-content" class="switcher-content">     
    <p class="medium">Contact Form</p> 
    <form class="contact" id="contact"> 
    <input type="text" name="name" placeholder="Name" id="contactname" /> 
    <input type="text" name="email" placeholder="Email" id="contactemail" /> 
    <textarea name="message" placeholder="Message" id="contactmessage"></textarea> 
    <button>Send</button> 
    </form> 
</div> 


#switcher-panel { 
    padding-top: 25px; 
} 
#content1-content, 
#content2-content, 
#content3-content { 
    display: none; 
} 
form { 
    width: 350px; 
} 
input[type="text"] { 
    float: left; 
    width: 220px; 
    margin-bottom: 10px; 
} 
textarea { 
    float: left; 
    width: 218px; 
    height: 100px; 
    margin-bottom: 10px; 
} 
button { 
    float: left; 
    clear: left; 
}