CODEWITHSUNDEEP
jqueryhtml
Quantico
Quantico

Reputation: 2436

getting the id of an inner item in a table due to a right click

I am trying to get the id of a span inside of a tr when I right click on it. I saw several posts that suggest $(this).attr('id') or this.id, but all of these only return the id of the entire table.

My html code:

<table id="table_id">
<tbody>
        <tr>
            <td colspan="2"><b>title</b></td>
        </tr>               
        <tr>
            <td class="table_row_message" colspan="2">
                <span onclick="toggleItem('trigger',1);" id="span_id_trigger1"> 
                                <span id="item1" class="toggle">text</span>
                                &nbsp;
                </span>
            </td>
        </tr>
    </tbody>
</table>

and I am trying to get the 'id="span_id_trigger1"'

my JQuery code

function testMenu(){
    $("#table_id").bind("contextmenu", function (event) {
    // Avoid the real one
    event.preventDefault();
    console.log(stuff I tried to print the id);
    $(".custom-menu").toggle(100).
    // In the right position (the mouse)
    css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
    return false;
});

I also have window.onload = testMenu, to make sure it is loading properly. As I said I keep getting the table_id no matter where i right click in the table

Upvotes: 1

Views: 61

Answers (1)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

You need to travel the DOM. Since you have 2 spans, you'll need to use :not()1:

console.log($(event.target).closest('tr').find('span:not(.toggle)').prop('id'));

1You could omit that part since prop return the id of the first element, which is what you are trying to target.

Upvotes: 1

Related Questions