Why is jQuery parent().index() not working when used in jQuery widget

Question

I am creating a jQuery widget. I have this code example set up to match my original situation as closely as possible...

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

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

someFunction();

JSBin here ----> http://jsbin.com/cewevo/

The issue is that, regardless of the 'X' button clicked on, the index result is '-1'. I have tried every element path I can think of, but the best I can do is get the innerText of the related button click. I need the index so that I can delete the correct element in the original array that was used to populate the list.

Code like this works as expected, except the lines below does not work for me in the widget context.

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

I am using the .proxy function to try to get the right context to the function "handleEvent".

M. Page · Accepted Answer · 2014-11-11 20:41:00Z

0

I don't think that using $.proxy is the best option here since, in your case handleEvent always receives the mouse event as argument.

The following code gives the result that you want.

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

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

answered Nov 11, 2014 at 20:41

M. Page

2,8342 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BillH Over a year ago

It may be that using 'that.target' in the selector part of the jQuery was most of the solution.

Brian Glaz · Accepted Answer · 2014-11-11 20:38:38Z

0

I've updated your code so it behaves how you are expecting:

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

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

}

someFunction();

They key here is to wrap $.proxy inside a function(). It wasn't working as expected because the context was wrong. Without the inner function, this inside of $.proxy was referring to jQuery itself, and not the jQuery object that was clicked on. The function parameter to on reccieves the clicked element as its context.

answered Nov 11, 2014 at 20:38

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Comments

ajmajmajma · Accepted Answer · 2014-11-11 20:39:02Z

0

I think you are over complicating it.

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

just add a class on the UL so it's a bit easier to call and viola

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

});

answered Nov 11, 2014 at 20:39

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

2 Comments

BillH Over a year ago

thanks for this solution, the idea of adding the class to the UL is something I totally did not think of. However, in my case, I already have a bunch of divs and classes, and I am trying to minimize adding additional divs/classes.

ajmajmajma Over a year ago

@BillH you dont have to add the class, it just makes it so you can directly call it

Collectives™ on Stack Overflow

Why is jQuery parent().index() not working when used in jQuery widget

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related