Question

I have an HTML table with several rows. If you hover on the row then it displays a contextual menu which allows to add or delete the rows.

When you add the row I clone the existing row and add to the table. This works correctly! The problem is when I hover over the new row it shows the menu at the wrong position. The position is related to the row which I originally cloned! It even return the wrong top and left position which is associated with the original row which was cloned.

Any ideas!

Not sure if this is going to help but here is little bit of code:

function addOptionRow(rowToBeAdded,rowId) {

    var searchClass = "TBLCONTENTS";

    var rows = $("#" + rowId).parent().children("tr");
    var rowCount = rows.length;

    for(i=0;i<rows.length;i++) {

        if ($(rows[i]).attr('class') != searchClass && $(rows[i]).prev().attr('class') == searchClass) {

            rowToBeAdded.attr("id", getRandomString()); 
            $(rows[i]).before(rowToBeAdded.clone());
        }
    }
}

Here is the menu display code:

function OnMouseOver(obj) { // obj is row which is passed in

    var top = 0;
    var left = 0;
    var id = "#" + obj.id;   

    currTemplateRow = obj.parentElement.parentElement;

    var pos = $(id).position();
    top = pos.top - 5;
    left = pos.left - 5;

    $("#menuToolsetTemplate").css(
            { position: "absolute",
                top: top + "px",
                left: left + "px"
            }
        ).show();  

}

Answer 1

I tried to simulate what you are doing and it works fine for me.. Check my jsFiddle DEMO. Onclick on each row it clones that row and appends it to the bottom. JSBin DEMO

As I mentioned in the comment, the obj that is being passed in your function OnMouseOver(obj) is not the correct row. You code doesn’t tell us where or how this mouse over function is binded to hover(mouseover and mouseout) event.

JS:

var index = 0;
$('#mytable tr').on ('click', function () {
    var $this_cloned = $(this).clone();
    $this_cloned.attr('id', this.id + (index++));
    $('#mytable tr:last').after($this_cloned);  
});

$('#mytable').on ('mouseenter', 'tr', function () {
    var top = 0;
    var left = 0;
    var id = "#" + this.id;   

    //currTemplateRow = obj.parentElement.parentElement;
    var pos = $(id).position();
    top = pos.top - 5;
    left = pos.left - 5;

    $("#menu").text ('Menu for ' + this.id);

    $("#menu").css(
            { position: "absolute",
                top: top + "px",
                left: left + "px"
            }
        ).show();  
});

$('#mytable').on ('mouseleave', 'tr', function () {
    $("#menu").hide();
});

HTML

<table id="mytable" cellpadding="0" border="1px" >
    <tr id="row1" >
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr id="row2" >
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>   
    <tr id="row3" >
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
</table>
<div id="menu">Menu</div>