Question

我遇到了我正在使用的.toggle()函数的问题。我使用PHP从数据库中获取结果并使用信息填充表。每个表行中的最后一项是一个链接，单击该链接时应显示另一行，允许管理员编辑该产品的信息。链接的类是.edit_prod这是我的jQuery方法：

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

有人可以帮我解决可能出错的问题吗？

谢谢！

更新

以下是创建HTML

的PHP代码

$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;

更新2：

Answer 1

根据你的上一句话

每个表行都是一个链接，单击时应显示另一行允许管理员编辑信息

似乎您正在动态地将元素加载到您的html，这样新元素就没有附加到它们的点击事件，因为您可能将它附加到document.Ready() ..

jQuery有一个“on”API，可用于将点击事件附加到动态加载的DOM元素。

修改感谢@rockerest ..从使用live()更改为on()并根据@Sly_cardinal进行了更正。

尝试类似的东西：

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

jQuery on API Documentation

Answer 2

@Mortalus：您发布的语法是针对常规直接事件侦听器（不是委派事件）。

委托事件侦听器语法在事件名称和事件处理程序之间有一个额外的选择器字符串（以Matt的代码为例）：

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

这意味着每次点击.edit_prod内的table元素时，都会调用该事件处理程序（即使稍后会向DOM添加更多.edit_prod元素）。

jQuery事件不会每次都被触发

2 个答案: