使用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」

回答

相關問題