Jquery Proxy Passing Parameters

How can you pass a string via proxy when binding event handlers? I want to pass a data attribute that is attached to the target handler to a method of an object. Is this possible?

Solution 1:

Is this what you are looking for:

<scripttype="text/javascript">functionReservationSchedulePicker(reservationType){
        this.reservationType = reservationType;
        this.schedulePickerDiv = $("#schedulePicker");
        this.schedulePickerDiv.on( "click", "#addWalk", $.proxy(this.openAddWalkDialog, this));
    }

    ReservationSchedulePicker.prototype.openAddWalkDialog = function(event) {
        event.preventDefault();
        alert(this.reservationType);
    }
    $(document).on('ready',function(){
        var x = newReservationSchedulePicker('hello world');
    });

</script><divid="schedulePicker"><ahref="#"id="addWalk"data-day="monday">Hello</a></div>

Update 1: Based additional details provided in comments

<scripttype="text/javascript">functionReservationSchedulePicker(reservationType){
        this.reservationType = reservationType;
        this.schedulePickerDiv = $("#schedulePicker");
        this.schedulePickerDiv.on( "click", "#addWalk", $.proxy(this.openAddWalkDialog, this, $("#addWalk").attr('data-day') ));
    }



    ReservationSchedulePicker.prototype.openAddWalkDialog = function(attr, event) {
        event.preventDefault();
        alert(this.reservationType + '=>'+ attr);
    }
    $(document).on('ready',function(){
        var x = newReservationSchedulePicker('hello world');
    });

</script><divid="schedulePicker"><ahref="#"id="addWalk"data-day="monday">Hello</a></div>

Update 2

<scripttype="text/javascript">functionReservationSchedulePicker(reservationType){
        this.reservationType = reservationType;
        this.schedulePickerDiv = $("#schedulePicker");
        this.schedulePickerDiv.on( "click", "#addWalk", $.proxy(this.openAddWalkDialog, this ));
    }



    ReservationSchedulePicker.prototype.openAddWalkDialog = function( event) {
        event.preventDefault();

        alert(this.reservationType + '=>'+ ($(event.target).data('day'))) ;
    }
    $(document).on('ready',function(){
        var x = newReservationSchedulePicker('hello world');
    });

</script><divid="schedulePicker"><ahref="#"id="addWalk"data-day="monday">Hello</a></div>

Solution 2:

What about something like reference arguments to proxy:

$(this.schedulePickerDiv).on('click', '#addWalk', $.proxy(this.openAddWalkDialog, this, { foo: bar }));

Or on the event.data object (event.data.foo):

$(this.schedulePickerDiv).on('click', '#addWalk', { foo: bar }, $.proxy(this.openAddWalkDialog, this));

Solution 3:

This should do the trick:

var that = this;

$(this.schedulePickerDiv).on("click", "#addWalk", function(e){
    that.openAddWalkDialog.call(this, e);
});

ReservationSchedulePicker.prototype.openAddWalkDialog = function(event) {
    console.log(event, $(this).data('day'));
}