使用jQuery更改.click（function（）{元素使用jQuery的元素

Question

我有一組可點擊的圖片，它指定了特定的服務提供，當用戶點擊圖片時，與該服務相關的表單滑入框架。 - 部分和後續部分通過可點擊的div進行訪問（如'CONTINUE'按鈕）。所有表單都以'Step1'開頭，隨後的部分根據所選的服務而有所不同 。根據所選擇的服務「繼續按鈕」的.click (function()

這裏的HTML：

<div class="form-holder"> 
<form id="inquiry" action="" method="" enctype="multipart/form-data"> 

<div class="select"> 
<p>Please select a service from the options below:</p> 

<div id="service1"><img class="product_img" src="" alt=" " /> 
<h1 style="margin-top: 0px">SERVICE ONE</h1></div> 

<div id="service2"><img class="product_img" src="" alt="" /> 
<h1>SERVICE TWO</h1></div> 

</div><!--End Select--> 

<div id="step1"> 

<fieldset id="field1"> 
<legend>Contact Information</legend> 

<div class="inline"> 
<div> Company Name:<br /> 
<input name="Company Name" size="20" type="text" /></div> 

<div>Contact Person: <br /> 
<input name="Contact Person" size="20" type="text" /></div> 

<div> Title/Affiliation: <br /> 
<input name="Affiliation" size="20" type="text" /></div></div> 

</fieldset> 

<div id="next1" class="next1">CONTINUE</div> 

</div><!--End Step1--> 



<div id="step2"> 

<fieldset> 
<legend>Company Information</legend> 

<div class="inline2"> 
<div> Products/Services:<br /> 
<textarea id="inline" name="Products"></textarea></div> 

<div> Affiliations/Licensing: <br /> 
<textarea id="inline" name="Licenses"></textarea></div></div> 

</fieldset> 

<div class="next2">CONTINUE</div> 

</div><!--End Step2--> 



<div id="step3"> 

<fieldset> 
<legend>Design Goals</legend> 

<div class="inline2"> 
<div> 
<textarea id="inline" name="Examples"></textarea></div> 
<div> 
<textarea id="inline" name="Features"></textarea></div></div> 

<div>Additional Information :<br /> 
<textarea id="full" name="Comments"></textarea></div> 

</fieldset> 

<input id="send" type="submit" value="Sumit Query"><input type="reset" value="Clear" style="margin-left: 490px" /> 

</div><!--End Step3--> 

</form> 

而這裏的jQuery的：

$(document).ready(function() { 
$("#service1").click(function() { 
$(".select").animate({width:"0%"}, 1000); 
$("#step1").animate({width:"77%"}, 1000); 
}); 
}); 


$(document).ready(function() { 
$(".next1").click(function() { 
$("#step1").animate({width:"0%"}, 1000); 
$("#step2").animate({width:"77%"}, 1000); 
}); 
}); 

$(document).ready(function() { 
$("#service2").click(function() { 
$(".select").animate({width:"0%"}, 1000); 
$("#step1").animate({width:"77%"}, 1000); 
$("#next1").addClass('next2').removeClass('next1'); 
}); 
}); 

$(document).ready(function() { 
$(".next2").click(function() { 
$("#step1").animate({width:"0%"}, 1000); 
$("#step3").animate({width:"77%"}, 1000); 
}); 
}); 

的目標是當選擇"#service2"更改類的"#next1"所以它將動畫形式的＃第3步，而不是"#step2"。

這可能嗎？

我對jQuery相當陌生，可以使用我可以獲得的所有幫助。預先感謝您提供的任何幫助。

兆焦耳

Answer 1

你可以使用bind()和unbind()如果你想單擊事件更改爲無或別的東西。

// bind click 
$('#myelement').bind('click', function() { 
    // do work 
}); 

// unbind click 
$('#myelement').unbind('click'); 

Answer 2

有你應該考慮一些東西......

你寫的應該是內的所有一切首先：

$(document).ready(function(){ 

你有四個獨立的部分在這裏，但他們應該全部在準備好的功能之內。

我不知道我明白你想要做什麼，但我會考慮創建兩種不同的形式，並將它們添加到兩個單獨的div。 如果用戶點擊選擇一個褪色的適當形式

$("#service1").click(function() { 
    $("#service1form").fadeIn(); 
}); 

然後你可以使用這樣的事情你繼續按鈕：

$("#service1form .continue").click(function(){... 

或

$('#service1form .step2").click(function(){.... 

希望這有助於！

Answer 3

當您更改類的元素，jQuery的不會改變，當你使用.bind()或類似.click()的速記事件方法因爲jQuery將這些事件處理程序，一旦當你叫這些方法是被綁定到它的事件和沒有按沒有意識到你已經將元素類更改爲其他已定義事件處理程序的其他元素，並且現在要使用這些元素，除非您使用.live()。

.bind（）的說明： 「將處理程序附加到元素的事件。「

爲了解決這個問題使用.live()方法的.live（）

描述： 」 附加的事件處理程序的當前選擇器現在和將來匹配其中，所有的元素。「

到解決方案中的關鍵詞有」 未來」，通過改變要素類，你想它，然後用你的那類設置您設置在頁面加載綁定事件，而不是事件類它原本，這將允許。

$(document).ready(function() { 
    $("#service1").click(function() { 
     $(".select").animate({width:"0%"}, 1000); 
     $("#step1").animate({width:"77%"}, 1000); 
    }); 

    $("#service2").click(function() { 
     $(".select").animate({width:"0%"}, 1000); 
     $("#step1").animate({width:"77%"}, 1000); 
     $("#next1").addClass('next2').removeClass('next1'); 
    }); 

    $(".next1").live('click', function() { 
     $("#step1").animate({width:"0%"}, 1000); 
     $("#step2").animate({width:"77%"}, 1000); 
    }); 

    $(".next2").live('click', function() { 
     $("#step1").animate({width:"0%"}, 1000); 
     $("#step3").animate({width:"77%"}, 1000); 
    }); 
}); 

這裏是展示在行動都.bind()和.live()演示fiddle。