CODEWITHSUNDEEP
jqueryjquery-uievent-handling
beginner_
beginner_

Reputation: 7622

JQuery UI: Can't get target element of event

I use slickgrid. One column (the first one) contains a link. Now when hovering over the link (mouseenter in jquery) a jquery ui dialog is shown containing some of the data that would be visible when clicking on the link. Often this will prevent the user from having to click on the link.

Because users can add rows to the grid dynamically I use the on() to bind the events

$("#grid").on({
    mouseenter: function () {
        //here I get the correct element but have to store it in global var
        myNumber = $(this).text(); 
        $( "#dialog-char" ).dialog("open");
    },
    mouseleave: function () {
        $( "#dialog-char" ).dialog( "close" );
    }
},
    ".char-link"
);

I want to pass myNumber to the dialog open function:

$( "#dialog-char" ).dialog({
    resizable: true,
    width: 750,
    autoOpen: false,
    open: function( event, ui ) {
        loadChar(myNumber);
    }
});

Like this it works but again I need the global variable. How can I access the link within the open() function? event.target isn't the link, it's the div containing the grid. the other target properties all return undefined.

Is is this possible at all?

Upvotes: 0

Views: 228

Answers (1)

T J
T J

Reputation: 43156

Well it doesn't look like there's a straight forward way. If you want to avoid a global variable, you could bind the info regarding hovered link to #dialog-char before opening it, using data() method as follows:

$("#grid").on({
  mouseenter: function () {
    $( "#dialog-char" ).data('myNumber',$(this).text()); 
    $( "#dialog-char" ).dialog("open");
  },
  mouseleave: function () {
    $( "#dialog-char" ).dialog( "close" );
  }
},
".char-link"
);

$( "#dialog-char" ).dialog({
 resizable: true,
 width: 750,
 autoOpen: false,
 open: function( event, ui ) {
    myNumber= $(this).data('myNumber');
 }
});

Upvotes: 1

Related Questions