Question

I’m using an asp.net repeater control to output the following markup:

<div class="detailsItem">
    <table style="width:100%;border: solid green 1px">
      <tbody>
        <tr>
          <td colspan="3" style="text-align: right">
            <a href="javascript:editItem($(this).closest('.detailsitem'));">Edit</a>
          </td>
        </tr>
      </tbody>
    </table>
</div>

I thought the code $(this).closest('.detailsitem') would give me the containing div. If I do an alert on what’s passed to editItem, I just get some javascript code showing up. Not sure where that comes from. I’ve tried various combinations of .parent etc with no luck.

I found this post which is similar, but it didn’t seem to help me out. I’m assuming the problem might be with my function call.

What am I missing?

many thanks, as always!

Answer 1

You need to use a class for your anchors in the repeater

<a href="javascript:void(0);" class="edit">Edit</a>

In ready event, attach a click event handler for all your Anchor’s:

$(".edit").live("click",function(){
    var cur = $(this);
    editItem(cur.closest("div.detailsItem"));
 });