Question

I’m having trouble with this little thing. I have a code that looks like this:

<table>.........
    <td>
        <span class="editable" id="name"><?= $name ?></span>
        <img class="edit_field" src="icons/edit.png"/>
    </td>
....... 
</table>

I want to obtain the id of the span, so that I can then change it (for example add an input box in it).

I have this:

$('.edit_field').live('click', function() {
    var td = $(this).parent();
    var span = td.find(".editable");
    alert(span.id)
});

But it’s not working… Any ideas? (I’m trying to do it like this so it’s reusable)

Answer 1

try this http://jsfiddle.net/VPvSD/

$('table').on('click', '.edit_field', function() {
    var td = $(this).parent();
    var span = $(this).prev('span');
    alert(span.attr("id"));
});