toElement only seems to work in Chrome, not IE or FF

Question

I have the following Javascript, and it only works in Chrome, and I can't figure out why:

//makes appointments draggable
    $("._ts").sortable({
        connectWith: "._ts", 
        revert: "true",
        cancel: ".new_appt",

    stop: function(e){
        var element =  e.toElement; 
        var date = $(element).parents('.route_container').find('.date h2').html(); 
        var timeslot = $(element).parents('.timeslot').attr('id'); 
        var tAppt_id = $(element).attr('id'); 
        console.log("Date:."+date); 
        console.log("time:."+timeslot); 
        console.log("route:."+tAppt_id); 

        $.ajax({
            type: "post",
            dataType: "json",
            url: ajaxurl, 
            data:{action: "update_appointments", date: date, timeslot: timeslot, appt_id: tAppt_id},
            success: function(response){
                if(response.type == "success"){
                    console.log("Update appointment worked."); 
                    console.log("Date:."+response.date); 
                    console.log("time:."+response.timeslot); 
                    console.log("route:."+response.timeslot); 



                    $(this).parents('.delete_appt').hide(); 
                }
            }
        });
    }

});

The problem is that the variables date, timeslot, & tAppt_id are returned as undefined. Again this works in Chrome; but, only in Chrome. DOES NOT work in IE or FF.

I have also tried using e.currentTarget and e.relatedTarget neither worked. Can someone tell me what I'm doing wrong?

Answer 1

Looks like you using jQuery-UI Sortable. In this case you'll get jQuery event object as first parameter to event handler. To get event target element you'll need to use target property:

var element = e.target;