I'm in the middle of building a form wizard and I've run into a problem with one of the object's methods. The object sjm_wizard is supposed to allow you to traverse a set of divs one div at a time. The problem is that I can't figure out how to call the object's methods within .click(). The scope is such that I can't just call this.turn() or this.update(), and when I try to use .call(whatever) to change the scope it will run through the .click()s when the page loads and then stop working.
Here's the code:<script type="text/javascript" src="jquery-1.2.6.js"></ script> <script type="text/javascript"> function change_page(){ alert("function call works") } function update_pages(visible_page){ alert("function call 2 works") } function sjm_wizard(start_page, div_name){ this.start_page = start_page || 0 this.div_id = div_name this.turn = change_page this.update = update_pages var a = this $('#' +this.div_id+ ' .page').eq(this.start_page).css({display: "block"}) $('#' +this.div_id+ ' .next_btn').click(function() { alert("test") }) //User clicks on the "Next" button (this works) $('#' +this.div_id+ ' .prev_btn').click((function() { this.turn()}).call(a)) //User clicks on the "Previous" button (this doesn't work) } $(document).ready( function(){ var current_page = 0 merlin_1 = new sjm_wizard(current_page, 'form1') }) </script> <style type="text/css"> .page{ height: 300px; border: solid black 1px; display: none; } </style> <div class="cll_main_content"> <div class="full_width" id="form1"> <div class="full_width page"> <button id="worked">Worked?</button> </div> <div class="full_width page"> 2 </div> <div class="full_width page"> 3 </div> <div class="full_width page"> 4 </div> <div class="full_width page"> 5 </div> <div class="full_width page"> 6 </div> <div class="full_width"> <button class="prev_btn">Previous</button> <button class="next_btn">Next</button> </div> </div> </div>