使用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。