Question

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

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

这是我的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

Answer 1

您尝试使用相同的上下文this从两个不同的对象访问属性。因此，在无绑定的情况下，您正确获得div属性的data-value元素值，因为在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

希望这有帮助，

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

1 个答案: