this.each 不是 jqm 小部件中的函数

Question

我的 jqm 小部件有一些问题。当我这样做时 $("div[id=leftSideList]").leftlist('refresh')，它工作正常。但是，如果我将下面的代码包装在这样的构造上

function _list (key) {
            switch (key) {
                case 'leftlist':
                    return $("div[id=leftSideList]").leftlist;
                case 'rightlist':
                    return $("div[id=leftSideList]").rightlist;
            }
        }

并使用it _list('leftlist')('refresh')。它的 return 我的错误 Uncaught TypeError: this.each is not a function

Answer 1

这个问题是因为返回的函数（leftlist 或 rightlist）失去了作用域；函数内的 this 不再引用 div[id="leftSideList"] 元素，因此出现错误。

您可以使用 $.proxy 来解决这个问题，但是它非常丑陋并且对于生产设置来说不是一个真正可行的解决方案：

function _list(key) {
  switch (key) {
    case 'leftlist':
      return $.proxy($("div[id=leftSideList]").leftlist, $("div[id=leftSideList]"));
    case 'rightlist':
      return $.proxy($("div[id=leftSideList]").rightlist, $("div[id=leftSideList]"));
  }
}

Working example - 请注意，这使用内置的 jQuery 方法，因为您没有提供 leftlist() 和 rightlist().

的来源

更好的解决方案是完全避免这种完全不必要的抽象。除了保持所选元素的一致性外，它没有为您提供任何好处。

function _list(key, action) {
  return $("div[id=leftSideList]")[key](action);
}

_list('leftlist', 'refresh')

最后请注意，使用 div[id=leftSideList] 是多余且缓慢的。您可以只使用 #leftSideList 代替。您使用属性选择器的唯一原因是，如果您有多个元素具有相同的 id 属性 - 这是无效的，您应该尽快解决这个问题。

this.each 不是 jqm 小部件中的函数

this.each is not a function in jqm widget

javascript

jquery

widget