[jQuery] Trouble using .Click() inside of an object definition
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>