html停止所以ajax请求,jQuery切换功能在AJAX HTML数据加载后停止工作

我有一个带有HTML的简单PHP文件(获取UL> LI> UL> LI形式的列表，该列表使用toggle()函数。该函数打开UL和显示或隐藏LI)。该页面还有一个可正常工作的输入表单(将数据添加到数据库)。jQuery切换功能在AJAX HTML数据加载后停止工作

AJAX表格成功后，我删除整个div并从数据库中重新打印。

我的问题：一旦打印新页面，toggle()函数将停止工作，直到页面刷新。

的切换功能(在外部JavaScript文件)：

$(document).ready(function() {

$(".product_category").click(function(event) {

event.preventDefault();

$(this).find("ul > .product").toggle();

});

});

形式：

形式发送功能：

$("#list_add_product_button").click(function(event){

var txt=$("#list_add_product").val();

$.ajax({

type: "POST",

url: "addproduct2.php",

cache: false,

data: {product: txt},

success: onSuccess,

error: onError

});

// IF THE SUBMIT WAS SUCCESFULL //

function onSuccess(data, status)

{

console.log(data);

clearInput();

$('#main_list').empty();

$('#main_list').html(data);

}

function onError(data,status){

// something

}

});

我得到印在console.log(data)什么：

Baked [2]

• Bread | 0 Unit
• Croissant | 0 Unit

现在，toggle()函数在添加产品之前工作良好。列表打开并关闭，没有任何问题。我没有在控制台中得到任何错误，我在页头(第一项)中加载jQuery。

我想说明的是，在代码打印之前和之后查看源代码看起来完全一样，除了打印新的额外的LI。

我错过了什么吗？ div数据刷新后jQuery函数是否停止工作？

2014-03-28

Bdevelle