How to restrict affecting range with jQuery?

Question

<table>
...
</table>

<script type="text/javascript">
$(selecctor).click(...)
</script>

The above is to be dynamic loaded by ajax.

What I want to do is restrict the selector so that it only affects the DOM within the table above it.I( can't assign an idto the table)

EDIT

To Gumbo's solution:

<div id="container">
</div>
<table>
..
</table>

I think for the above html,it will fail,because $('table:last') is not the newly loaded table,but the table after container

Answer 1

You can pass a context element with the second parameter:

$("selector", $("table")).click(...)

Then the selector is evaluated based on that context.

---

Edit    Try table:last to select the last added node:

$("selector", $("table:last")).click(...)

This should work as only the nodes up to the SCRIPT element are already added to the DOM. But this does only work if you call $ directly and not via $.ready or $(document).ready.

Answer 2

Add a class to the table.

<table class="myUniqueClass">...</table>

$(".myUniqueClass").click(...);

Answer 3

You should show the whole html being loaded via ajax, as well as the html that will receive the loaded content.

But, say you are loading this table inside a div#mycontent and assuming there will only be one table:

$('#mycontent table:first').click();

Or better, assuming you should call your javascript in the ajax callback and separate the js and the html

$('#mycontent').load('file.php',function(data){
var selector = $('table',data).eq(0);
});