0

更新

我正在使用 jQuery 1.10.1 ...所以.live折旧了...我刚刚替换了

$("table.dynatable button.remove").live('click', function (e) { 
$(this).parents("tr").remove();
});

和

$(document).on("click", "table.dynatable button.remove", function() { 
$(this).parents("tr").remove(); 
});

现在它可以工作了，希望这对某人有所帮助。

我有这个 jQuery 使用 php 和 html 表单：

我的PHP：

foreach ($matric_type as $row) {
$matric_type = $row->matric_type;
}

这会根据您拥有的矩阵（12 年级）认证类型填充下拉列表。每个矩阵认证都有一个不同主题的列表，这些主题被填充在另一个下拉列表中。

我的 jQuery：

$(document).ready(function () {

    var id = 0;
    event.preventDefault();

    // Add button functionality
    $("table.dynatable button.add").click(function (e) {
        e.preventDefault();
        id++;
        var master = $(this).parents("table.dynatable");

        // Get a new row based on the prototype row
        var prot = master.find(".prototype").clone();
        prot.attr("class", "")
        prot.find(".id").attr("value", id);

        master.find("tbody").append(prot);
    });

    // Remove button functionality
    $("table.dynatable button.remove").live('click', function (e) { // this might be the problem?
        //e.preventDefault();           //this does not work
        // e.stopImmediatePropagation(); //this does not work
        // e.stopPropagation();          //this does not work
        $(this).parents("tr").remove();
        //$(this).closest('.prototype').remove()
        // $(this).parent().parent().remove();         
    });
});

html:

 <table class="dynatable">
                            <thead>
                                <tr>
                                    <th>Subject No</th>
                                    <th>Subject</th>
                                    <th>Mark</th>
                                    <th><button class="add">Add</button></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="prototype">
                                    <td><input type="input" name="id[]" value="0" class="id" readonly /></td>
                                    <td><select id="list"></select></td>
                                    <td><input type="text" name="mark[]" value="" /></td>
                                    <td><button class="remove">Remove</button>
                                </tr>
                        </table>

这个 jQuery 使用添加按钮来添加一行主题编号、一个主题下拉列表、一个用于输入该主题标记的文本字段。我可以添加就好了。问题出在删除按钮上。每次我单击删除按钮时，它都会刷新页面，并添加

?id%5B%5D=0&mark%5B%5D=&id%5B%5D=1&mark%5B%5D=

到网址。我添加的“主题”越多，上述内容就越长，例如。如果我添加 2 个科目

?id%5B%5D=0&mark%5B%5D=&id%5B%5D=1&mark%5B%5D=&id%5B%5D=2&mark%5B%5D=

我尝试添加到删除功能：

e.preventDefault();           
e.stopImmediatePropagation(); 
e.stopPropagation();

但它仍然会重新加载页面，删除所有主题行，而不仅仅是单击的主题行。有人可以为我的问题提供可能的解决方案吗？

4

1 回答 1

1

添加type=button到你的按钮，否则按钮就像一个submit按钮

<button class="remove" type='button'>Remove</button>
于 2013-07-10T10:47:42.180 回答