Question

有人可以告诉我为什么我不能使用$.proxy删除dom元素。

更新：我知道我可以使用匿名函数，但我特别感兴趣的是知道为什么$ .proxy无效。

<html>
    <head>
    <title>$.proxy Test</title>
    </head>
<body>
<ul id="test">    
</ul>
<script>
var test = $('#test');
    var li = $('<li>Test Entry</li>').appendTo(test);
    li.click($.proxy(li, 'remove')); // Does not work
    //li.click($.proxy(li.remove, li)); // Does not work
    //li.click(function(){li.remove();}); // Works

</script>
</body>
</html>

更新2 ：我不想使用通常的函数定义语法，因为我不希望单个语句扩展到多行。因此我决定使用以下语法。我不知道这是不是一个好习惯，但对我来说，代码看起来更干净。

$ .proxy（new Function（'this.remove（）'），li）;

Answer 1

在您的代码示例中：

li.click($.proxy(li, 'remove'));

它会在点击时调用li.remove()，但它会将click事件作为.remove()

的第一个参数调用它

像：

li.remove(e);

但.remove()期望该参数中有一个选择器。在尝试将其用作选择器时，它显然会导致.remove()失败，因此它不会执行任何操作。

因此，代理正在执行您要求它执行的操作，但这不适用于此特定用途，因为.remove()期望的参数与.click()事件传递的内容不兼容。 / p>

我在jQuery源代码中单步执行代理函数时发现了这一点，但您也可以看到，当您单击文本以激活对代理函数的调用时，会抛出异常。发生这种特殊异常是因为jQuery期望selector参数是一个带有.replace()方法的字符串，但它是一个jQuery事件对象（来自click事件），它没有这个方法。

我并不是说这是一个有意义的解决方案，而是为了说明$.proxy()在这种情况下工作，当你给它一个不期望jQuery事件对象以外的东西的函数作为它的第一个参数时，这段代码有效：

var test = $('#test');
var li = $('<li>Test Entry</li>').appendTo(test);
li.myRemove = function(e) {this.remove();};
li.click($.proxy(li, "myRemove"));

你可以在这里看到它：http://jsfiddle.net/jfriend00/TyaeZ/。在这里，我创建了一个myRemove方法，该方法期望.click（）提供它的参数并且它可以工作。

Answer 2

Takes a function and returns a new one that will always have a particular context. see docs

您需要.remove

var test = $('#test');
    var li = $('<li>Test Entry</li>').appendTo(test);
li.bind({
    click:function(e){
        e.stopPropagation();
        $(this).remove();
    }
});

http://jsfiddle.net/ZbBAh/21/

删除dom元素时，$ .proxy不起作用

2 个答案: