Question

I am having an issue with the .toggle() function that I am using. I am getting results from a database using PHP and filling a table with the information. The last item in each table row is a link, that when clicked should show another row that allows an admin to edit the information for that product. The link’s class is .edit_prod Here is my jQuery method:

$(function() {
$(".edit_prod").click(function() {
 $("#mydiv").toggle();
      return false;
     });
 });

Can someone help me out on what could possibly be going wrong?

Thanks!

Update:

Here is the PHP code which creates the HTML

$table_format = sprintf("
        <tr>
            <td>
                <img src='%s' id='edit_img_pic' />
            </td>
            <td>
                %s
            </td>
            <td>
                %s
            </td>
            <td>
                <a class='edit_prod' href='#'>Edit</a>  
            </td>



        </tr>
        <tr id='mydiv' style='display: none' cellspacing='20px'>
            <form action='edit_product.php' method='post'>
            <td>
                <label for='name'>Product Name</label><br>
                <input type='text' name='name' value='%s' /><br><br>
            </td>
            <td>
                <label for='sku'>SKU</label><br>
                <input type='text' name='sku' value='%s' /><br><br>
            </td>
            <td>
                <label for='price'>Price</label><br>
                $<input type='text' name='price' value='%s' /><br><br>
            </td>
            <td>
                <label for='desc'>Description</label><br>
                <textarea cols='40' rows='7' name='desc'></textarea><br><br>
                <input type='submit' value='Save' />
            </form>
        <tr>
        ", $img, $prod_name, $sku, $prod_name, $sku, $price);

        echo $table_format;

Update 2:

Answer 1

According to your last sentence

each table row is a link, that when clicked should show another row
that allows an admin to edit the information

Seems that you are dynamically loading elements to your html, that way the new elements have no click event attached to them because you probably attach it on document.Ready()..

jQuery has a “on” API that you could use to attach click events to DOM elements loaded dynamically.

EDIT
Thanks to @rockerest.. changed from using live() to on() and corrected according to @Sly_cardinal.

Try something like that:

$(function() {
    $("table").on("click", ".edit_prod", function() {
        $("#mydiv").toggle();
        return false;
    });
});

jQuery on API Documentation