使用RequireJS和JQuery onclick事件处理“this”

我正在更新应用程序以使用RequireJS并将函数/变量移出全局上下文。我不确定在使用JQuery点击处理程序时如何构造事物，以便我的函数可以访问HTML对象上的data-*属性，这些属性触发点击并有权访问模块内的属性。使用RequireJS和JQuery onclick事件处理“this”

下面是一个简单的测试案例，我放在一起来展示我正在尝试做什么。我想要一个在div的click事件上调用的函数，它能够访问触发它的div上的data-value属性和我使用RequireJS加载的模块内的packageVar属性。

这里是我的index.html：

<!DOCTYPE html> 
<head> 
    <title>Test.Next</title> 
</head> 
    <body> 
    <script data-main="js/test-require" src="js/require.js"></script> 
    <div id="test-no-bind" data-value="value">Test No Bind</div> 
    <div id="test-bind" data-value="value">Test Bind</div> 
    </body> 
</html>

这里是test-require.js：

requirejs.config({ 
    "baseUrl": 'js', 
    "paths": { 
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min", 
    "domReady": 'vendor/domReady' 
    } 
}); 
requirejs(['maintest','domReady!'], function(main) { 
    main.initialize(); 
});

最后我maintest.js：

define(['jquery','domReady!'], function($) { 
    return { 
    'packageVar' : 'test', 
    buttonClick : function() { 
     console.log($(this).attr("data-value")); 
     console.log(this.packageVar); 
    }, 
    initialize: function() { 
     $("#test-no-bind").click(this.buttonClick); 
     $("#test-bind").click(this.buttonClick.bind(this)); 
    } 
    }; 
});

的test-no-bind DIV结果：

value 
undefined

中的test-bind DIV结果：

undefined 
test

来源

2015-01-26 Jordan Reed

你试图使用相同的背景下this两个不同对象访问属性。因此，在无绑定的情况下，您可以正确得到data-value属性的div元素值，因为在jquery click函数中this上下文是事件产生的元素，但是您获取并未定义其他对象属性，因为元素没有packageVar属性。对于使用bind函数的绑定案例，您将对象作为this上下文传递，因此您的值为packageVar，但不包含元素属性。

尝试使用正确的上下文来调用buttonClick和传递元素方面的功能，以从他的源正确获取每个值：

define(['jquery','domReady!'], function($) { 
    return { 
    'packageVar' : 'test', 
    buttonClick : function(element) { 
     console.log($(element).attr("data-value")); 
     console.log(this.packageVar); 
    }, 
    initialize: function() { 
     var that = this; 
     $("#test-no-bind").click(function() { 
     that.buttonClick(this); 
     }); 
     $("#test-bind").click(function(){ 
     that.buttonClick(this); 
     }); 
    } 
    }; 
});

与此JSFIDDLE

希望试试这个帮助，

来源

2015-01-26 22:03:08 albciff

使用RequireJS和JQuery onclick事件处理“this”

回答

相关问题