Question

I’m trying to open a different ajax modal for each table row clicked.
So I did this:

<tr onclick="$.colorbox({href:"ajax.html"});">
    <td>Hello</td>
    <td>menu</td>
    <td>chicken</td>
</tr>

That, however doesn’t work – while this does:

<p>Click for ajax function</p>

$("p").click(function () { 

    $.colorbox({href:"ajax.html"});

});

Here’s a running example

If anyone could please point me in the right direction I would be extremely happy :)) Thanks everyone!:)

Answer 1

Just change your jQuery selector to the tr tags and walaa:

$("tr").click(function () { 

    $.colorbox({href:"ajax.html"});

});

I tested this by adding the above code snippet to your site via the FireBug JS Console.

The issue with your inline code is that you are using double-quotes more than you should:

onclick="$.colorbox({href:"ajax.html"});"

Should change to:

onclick="$.colorbox({href:'ajax.html'});"

Notice the single quotes around the URL. Your code looks like this to browsers:

<tr class="" ajax.html"});"="" onclick="$.colorbox({href:">