Question

Is there any syntax error, cause it is not working currently? However, it is working if comments .click(check(seats[i])); and uncomment .click(deleteBooking); & .toggle(appendBooking, deleteBooking); .

Thanks in advance.
Cheers.

$(document).ready(function() {
function Seat(seat_xcoord, seat_ycoord, row_name, row_label, column_name, column_label){
this.seat_xcoord = seat_xcoord;
this.seat_ycoord = seat_ycoord;
this.row_name = row_name;
this.row_label = row_label;
this.column_name = column_name;
this.column_label = column_label;
this.state = false;

this.getState = function(){
return this.state;
}

this.setFstate = function(){
this.state = true;
}

this.setTstate = function(){
this.state = false;
}
}

function check(Seat){
if(Seat.getState==false){
appendBooking();
Seat.setTstate();
}else{
deleteBooking();
Seat.setFstate();
}
} 

var seats = new Array();    

var i =0;   
var price = 0;

$.get('seating_plan.xml', function(d){
$(d).find('seat').each(function(){
    var $seat = $(this);
    var seat_xcoord = $seat.attr("seat_xcoord");
    var seat_ycoord = $seat.attr("seat_ycoord");
    var row_name = $seat.attr("row_name");
    var row_label = $seat.attr("row_label");
    var column_name = $seat.attr("column_name");
    var column_label = $seat.attr("column_label");          
    var leftValue = seat_xcoord*20;
    var bottomValue = seat_ycoord*20;

    seats[i]= new Seat(seat_xcoord, seat_ycoord, row_name, row_label, column_name,   column_label);

    var $ticketRowDiv = $('<div id="ticket'+i+'"></div>'); //One row of ticket details
    var $ticketInfoDiv = $('<div class="ticket-item">'+row_name+column_name+'</div><div class="ticket-item">$15.50</div>');

    function deleteBooking(){
        $seatdiv.css("background-color","#42de18"); //change seat color back to green
        $ticketRowDiv.hide(); //hide the ticket details
        price = price-15.50; 
        $('#price h1').html('$'+price); //display total price
    }

    function appendBooking(){
        $seatdiv.css("background-color","#f64848"); //change seat color to red
        $('#details').append($ticketRowDiv); //add ticket details to sidebar
        $ticketRowDiv.show(); 
        price =price+15.50; 
        $('#price h1').html('$'+price);//display total price
        check(seats[i]);
    }

    function seatHover(){
        $(this).addClass("seat-hover");
    }

    function seatUnHover(){
        $(this).removeClass("seat-hover");
    }

    var $dltDiv = $('<div id="dlt_seat'+i+'" class="ticket-item"><a href="#">delete</a></div>')
                //.click(deleteBooking);
                .click(check(seats[i]));

    $ticketRowDiv.append($ticketInfoDiv); //append "seat No." and "sub Total" to a ticket details row
    $ticketRowDiv.append($dltDiv); //append "delete" link to a ticket details row

    var $seatdiv = $('<div id = "seat'+i+'" class="seat"></div>')
                .css({left: leftValue + 'px', bottom: bottomValue + 'px'})   //define seat location in seating map
                .hover(seatHover,seatUnHover)
                .click(check(seats[i]));
                //.toggle(appendBooking, deleteBooking); 

    $('#canvas').append($seatdiv); //add a seat to seating map
    i++;
});
}); 

});

Answer 1

You are binding the return value from the function check, not the function, ane the function doesn’t return anything.

Bind an anonymous function that calls the check function:

.click(function(){ check(seats[i]); });

However, you need to create a closure around the code to capture the value of i instead of the variable itself, as the variable changes before the event happens:

var $dltDiv = (function(i) {
  return $('<div id="dlt_seat'+i+'" class="ticket-item"><a href="#">delete</a></div>').click(function(){ check(seats[i]); });
})(i);