2

标题可能措辞不正确。基本上我正在使用自定义事件处理程序进行测试并到达它们正在工作的地步，但是事件处理程序的this指向 ControlClientSide 而不是触发事件的项目。

下面的代码将澄清一切：

function ControlClientSide()
{    
    this.CheckBoxClicked = function(e) { }        
    this.Configure = function() {        
        $('#checkBox100').change(function(e) { $(this).trigger("CheckBoxClicked"); }.bind(this));                
    };
    this.Configure();
};

var x = new ControlClientSide();
$(x).on("CheckBoxClicked", function(e) { alert( /* $(this).val() + */ ' Hi'); })
    .on("CheckBoxClicked", function(e) { alert( /* $(this).val() + */ ' Hi2'); });

在这两个处理程序中，我试图将这一点指向实际的复选框项。目前它指向 ControlClientSide。谁能建议我缺少什么？

请参阅以下 JSFIDDLE：http: //jsfiddle.net/KC5RH/3/

4

2 回答 2

0

您使用 . 将其显式绑定到您的对象.bind(this)。此外，您将对象设置为侦听事件，而不是 DOM 节点。因此，您需要删除该bind(this)部分。

然后，使用trigger而不是triggerHandler让事件在 DOM 中冒泡，因此您可以使用委托来捕获它：

function ControlClientSide()
{    
    this.CheckBoxClicked = function() { }        
    this.Configure = function() {        
        $('#checkBox100').change(function() {
            $(this).trigger("CheckBoxClicked"); 
        });   
    };
    this.Configure();
};

var x = new ControlClientSide();
$(document).on("CheckBoxClicked", "input", function() { console.log(this); alert(this.id); })

http://jsfiddle.net/KC5RH/9/

于 2013-11-13T18:23:21.087 回答
0

如果您想访问触发事件的复选框，只需将其作为triggerHandler调用中的附加参数传递。另外，删除您的.bind(this)电话，在这种情况下不需要它：

function ControlClientSide()
{    
    this.CheckBoxClicked = function() {  } 

    var thisControl = this;
    this.Configure = function() {        
        $('#checkBox100').change(function() { $(thisControl).triggerHandler("CheckBoxClicked", this);});   
    };
    this.Configure();
};

然后，您可以通过侦听器中的参数访问该元素：

$(x).on("CheckBoxClicked", function(obj, arg) {  alert( $(arg).attr("id") + ' Hi'); })
    .on("CheckBoxClicked", function(obj, arg) { alert( $(arg).attr("id") + ' Hi2'); });

请参阅小提琴以获取完整的工作解决方案：http: //jsfiddle.net/85qdH/4/

于 2013-11-13T18:25:46.310 回答