为什么在 jQuery 小部件中使用 jQuery parent().index() 时不起作用

Question

我正在创建一个 jQuery 小部件。 我设置了这个代码示例以尽可能接近我的原始情况...

function someFunction(){
$("#somediv").on("click", ".rem", $.proxy(this.handleEvent, this));
}

function handleEvent(that){
    var testval = $(that).parent().index();
   console.log(testval);
}

someFunction();

这里是JSBin ----> http://jsbin.com/cewevo/

问题是，无论点击了“X”按钮，索引结果都是“-1”。 我已经尝试了我能想到的每一个元素路径，但我能做的最好的就是获取相关按钮点击的 innerText 。我需要索引，以便删除原始数组中用于填充列表的正确元素。

这样的代码按预期工作，除了下面的行在小部件上下文中对我不起作用。

  $("somediv").on("click", ".rem", function(){
    var testval = $(this).parent().index();
});

我正在使用 .proxy 函数尝试为函数“handleEvent”获取正确的上下文。

Answer 1

我不认为在这里使用$.proxy 是最好的选择，因为在你的情况下handleEvent 总是接收鼠标事件作为参数。

下面的代码给出了你想要的结果。

function someFunction(){
    $("#somediv").on("click", ".rem", $.proxy(this.handleEvent));
}

function handleEvent(that){
    var testval = $(that.target).parent().index();
    console.log(testval);
}

Answer 2

我已经更新了您的代码，使其符合您的预期：

function someFunction(){
$("#somediv").on("click", ".rem", function() { 
      $.proxy(handleEvent, this)();
    });
}

function handleEvent(){
   var testval = $(this).parent().index();
   console.log(testval);

}

someFunction();

这里的关键是将$.proxy 包裹在function() 中。它没有按预期工作，因为上下文错误。如果没有内部函数，$.proxy 内部的 this 指的是 jQuery 本身，而不是被点击的 jQuery 对象。 on 的函数参数接收单击的元素作为其上下文。

Answer 3

我认为你过于复杂了。

http://jsbin.com/kekadubeca/2/

只需在 UL 上添加一个类，这样调用和 viola 会更容易一些

var items = $('.myUl li').click(function() {
    console.log(items.index(this));

});