Search code examples
jquerycolorbox

Execute colorbox function onClick in a table?

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!:)

Solution

  • 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:">