Home/ Questions/Q 7047657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:47:52+00:00

Can someone tell me why I cannot use $.proxy to remove a dom element.

  • 0

Can someone tell me why I cannot use $.proxy to remove a dom element.

Update: I know I can use anonymous function, but I am particularly interested in knowing why $.proxy is not working.

<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>

Update 2 : I did not want to use the usual function definition syntax, since I did not want a single statement to spread into multiple lines. Hence I decided to use the following syntax. I don’t know whether it is a good practice, but to me, the code looks cleaner this way.

$.proxy(new Function(‘this.remove()’), li);

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your code example:

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

    it does call li.remove() upon the click, but it calls it with the click event as the first argument to .remove()

    like:

    li.remove(e);

    but .remove() is expecting a selector in that argument. In trying to use it as a selector, it apparently causes .remove() to fail, thus it doesn’t do anything.

    So, proxy is doing what you asked it to do, but that isn’t appropriate for this particular use because .remove() is expecting arguments that are incompatible with what the .click() event passes it.

    I discovered this myself when stepping through the proxy function in the jQuery source, but you can also see that when you click on the text to active the call to the proxied function, an exception is thrown. This particular exception happens because jQuery is expecting the selector argument to be a string with a .replace() method, but it’s a jQuery event object (from the click event) which doesn’t have this method.

    I’m not suggesting this as a meaningful solution, but to illustrate that $.proxy() works in this situation when you give it a function that isn’t expecting something other than a jQuery event object as it’s first argument, this code works:

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

    You can see it work here: http://jsfiddle.net/jfriend00/TyaeZ/. Here, I create a myRemove method that is expecting the arguments that .click() gives it and it works.

    • 0