jQuery內容切換器（不能使聯繫表單工作）

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; 
}