0

我正在使用的.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：

4

2 回答 2

2

根据你的最后一句话

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

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

jQuery 有一个“on” API，您可以使用它来将点击事件附加到动态加载的 DOM 元素上。

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

尝试这样的事情：

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

jQuery 上的 API 文档

于 2013-01-29T03:29:26.693 回答
1

@Mortalus：您发布的语法适用于常规直接事件侦听器（不是委托事件）。

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

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

这意味着只要单击.edit_proda 中的元素table，就会调用该事件处理程序（即使稍后将更多.edit_prod元素添加到 DOM 中）。

于 2013-01-29T04:41:43.810 回答