Ajax скрипт успеха пишет код, который не выполняется

Question

Я делаю простое приложение Ajax Список покупок. Введенные элементы, если необходимо, добавляются в базу данных, и список покупок обновляется.

Каждый элемент имеет флажок, который, когда установлен, запускает корзину tra sh, которую можно щелкнуть, чтобы удалить элемент (s) из списка. Затем список обновляется в функции (refreshList ()), вызываемой при успехе.

В обоих случаях, когда список обновляется после Ajax успеха, элемент списка включает в себя свой флажок, но он больше не срабатывает тра sh корзина Когда страница перезагружается, все работает правильно.

Сначала я включаю две функции, которые вызывают ее при успешном завершении, затем функцию, которая обновляет список покупок после добавления или удаления элемента, а затем разметку.

Пожалуйста, LMK, если что-то еще нужно. Заранее спасибо.

function addItemToDatabase()
{
    var item = $( '#item' ).val();

    $.ajax({
        type : 'get',
        url : '/ajax/addItemToDatabase/' + item,
        data : {
            '_token' : csrf
        },
        success: function() {
            that.refreshList();
            $( '#item' ).val( '' );
            $( '#item' ).focus();
            $( '#itemResults' ).html( '' );

        },
        error: function( xhr, status, error ) {
            var errorMessage = xhr.status + ': ' + xhr.statusText;
            alert( 'Error updating database: ' + errorMessage );
        }
    });
}


function markAsBought()
{
    var itemsArray = [];

    $( "input:checkbox[name=bought]:checked" ).each( function() {
        itemsArray.push($(this).val());
    });

    itemsJSON = JSON.stringify( itemsArray );
    console.log( itemsJSON );
    $.ajax({
        type : 'get',
        url : '/ajax/removeFromList/' + itemsJSON,
        data : {
            '_token' : csrf
        },
        success: function( response ) {
            that.refreshList();
        },
        error: function( xhr, status, error ) {
           var errorMessage = xhr.status + ': ' + xhr.statusText;
           alert( 'Error updating database: ' + errorMessage );
        }
    });
}


function refreshList()
{
    var listDiv = $('#listBody');
    listDiv.fadeOut('fast');
    $.ajax({
        type : 'post',
        url : '/ajax/refreshShoppingList',
        data: {
            '_token' : csrf
        },
        success: function( response ) {
            var html = new String();
            var json = JSON.parse( response );

            for( var i=0; i<json.length; i++ ) {
                var item = json[i].item;
                html += '<span class="listItem">\n';
                html += '   <input type="checkbox" name="bought" class="listItemCheckbox" value="' + item + '"/>&nbsp;' + item + '\n';
                html += '</span>\n';
            }

            listDiv.html( html );
            $('#deleteSelectedItems').hide();
            listDiv.fadeIn( 'fast' );
        },
        error: function( xhr, status, error ) {
            var errorMessage = xhr.status + ': ' + xhr.statusText;
            alert( 'Error refreshing list: ' + errorMessage );
        }
    });

    listDiv.fadeIn( 'slow' );
}

Вот разметка:

<div id='list'>

    <div id='listHead'>
        <h1>Shopping List</h1>
        <img src='{{ config( 'constants.imgsURL' ) }}delete.png' width='20' height='20' id='deleteSelectedItems' onclick='markAsBought()' />

@if( isset( $list ))
        {{ Form::checkbox( 'selectAll', null, null, ['id'=>'selectAllCheckbox', 'title'=>'Select/deselect all'] ) }}
@endif

    </div>

    <div id='listBody'>

@if( isset( $list ))
    @foreach( $list AS $item )

        <span class='listItem'>
            <input type='checkbox' name='bought' class='listItemCheckbox' value='{{ $item->item }}' />&nbsp;{{ $item->item }}
        </span>

    @endforeach
@else

        <p>No items on list.</p>
    </div>
@endif
</div>