CODEWITHSUNDEEP
jqueryasp.netjquery-selectors
earthling
earthling

Reputation: 5264

getting container element with jquery

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!

Upvotes: 0

Views: 603

Answers (3)

Split Your Infinity
Split Your Infinity

Reputation: 4229

jQuery selectors are case sensitive try the following... (uppercase I in items)

$(this).closest('.detailsItem')

Update:

Chandu is also right about the 'this' object being the window object within an href='javascript:...'. You can also use the onclick='' attribute where the 'this' object is a reference to the actual anchor.

Upvotes: 1

Akhil
Akhil

Reputation: 7600

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"));
 });

Upvotes: 1

Chandu
Chandu

Reputation: 82913

As per your code this context is set to the window object when the editItem function is executed.

Instead bind the click event unobstrusively.

e.g:

<div class="detailsItem">
    <table style="width:100%;border: solid green 1px">
      <tbody>
        <tr>
          <td colspan="3" style="text-align: right">
            <a href="#edit" class="edit-item">Edit</a>
          </td>
        </tr>
      </tbody>
    </table>
</div>

<script type="text/javascript">
 $(function(){
    $(".edit-item").click(function(e){
        e.preventDefault();
        editItem($(this).closest('.detailsItem')); //Changed the class selector to match what you have in HTML
    });
 });
</script>

Upvotes: 1

Related Questions