jquery代理传递参数答案

【问题标题】：jquery proxy passing parametersjquery代理传递参数
【发布时间】：2014-01-21 16:48:06
【问题描述】：

绑定事件处理程序时如何通过代理传递字符串？我想将附加到目标处理程序的数据属性传递给对象的方法。这可能吗？

function ReservationSchedulePicker(reservationType){

//Reservation Type Accepted Use: 'routine' || 'vacation'
this.reservationType = reservationType;

//DIV for Schedule Picker
this.schedulePickerDiv = $("#schedulePicker");

//Add Event Handler to Anchor
$(this.schedulePickerDiv).on( "click", "#addWalk", $.proxy(this.openAddWalkDialog, this));
}

}
    
ReservationSchedulePicker.prototype.openAddWalkDialog = function(event, day) {
//Trying to pass the data-day value to this function using proxy



}


     //I need the data-day value inside of openAddWalkDialog Is this possible?
     <a href="#" id="addWalk" data-day="monday">

【问题讨论】：

标签： javascript jquery oop jquery-events

【解决方案1】：

这是你要找的东西吗：

<script type="text/javascript">
    function ReservationSchedulePicker(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 = new ReservationSchedulePicker('hello world');
    });

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

更新 1：基于 cmets 中提供的其他详细信息

<script type="text/javascript">
    function ReservationSchedulePicker(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 = new ReservationSchedulePicker('hello world');
    });

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

更新 2

<script type="text/javascript">
    function ReservationSchedulePicker(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 = new ReservationSchedulePicker('hello world');
    });

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

【讨论】：

一切正常。当点击链接时，警报会从 openAddWalkDialog() 触发，就像它假设的那样。我现在需要的是以某种方式将#addWalk 链接数据日属性发送到 openAddWalkDialog() 函数。我相信我需要将它作为代理函数的参数传递，我只是不确定如何做到这一点：/
@JustinHarris 我刚刚提供了基于最后这些 cmets 的更新版本。
谢谢，这正是我所需要的。
有 7 个不同的链接，ID 为#addWalk，所以我需要专门获取被点击链接的属性。这可能吗？现在所有点击的链接都使用 $("#addWalk").attr('data-day') 返回相同的数据日
@JustinHarris 上次更新任何新要求都必须转到新主题

【解决方案2】：

这应该可以解决问题：

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'));
}

【讨论】：

感谢它有效，但是数据返回未定义。 clickedElement 正确出现。我的链接设置为
@JustinHarris 没问题，很高兴为您提供帮助！

【解决方案3】：

代理的引用参数之类的呢：

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

或者在 event.data 对象（event.data.foo）上：

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

【讨论】：