jquery - jqueryで動的に作成されたdivを切り替える

Question

クラス名がlist_itemとの 2 つの div がありlist_item_menuます。それらは両方とも class を持つ別の div に含まれていlist_item_containerます。がクリックさlist_item_menuれたときに表示/非表示を切り替えるには、次を使用できます。list_item

$(".list_item").click(function() {
    $(this).next('.list_item_menu').toggle();
});

これは、div が元の html に記述されている場合は機能しますが、div が動的に作成されている場合、トグルは機能しません。私は次のようにそれらを作成しようとしました：

function addListItem () {
var text = $("#new_item_field").val();
$("#list_box").children().last().after(
    '<div class = "list_item_container">'+
        '<div class = "list_item">'+
            text+
        '</div>'+
        '<div class = "list_item_menu">'+
            'notes | due | completed'+
        '</div>'+   
    '</div>'
);
$("#new_item_field").val('');
}

そしてこのように：

function addListItemToDoc () {
var text = $("#new_item_field").val();

var listbox = document.getElementById('list_box');
var container = document.createElement('div');
    container.className = 'list_item_container';
var item = document.createElement('div');
    item.className = 'list_item';
    item.innerHTML = text;
var menu = document.createElement('div');
    menu.className = 'list_item_menu';
    menu.innerHTML = "notes | due | completed";

container.appendChild(item);
container.appendChild(menu);
listbox.appendChild(container);

    $("#new_item_field").val('');
}

しかし、どちらの方法もうまくいかないようです。何か案は？