Как запросить DOM, чтобы получить значение атрибута с событием " sortremove"

Когда "спонсор" перетаскивается из одной команды в другую, мне нужно выполнить запрос ajax, чтобы удалить спонсора в базе данных. 

<ul class="teamList clearAfter">
        <li class="team" data-teamid="548">
            <label>Team 1</label>
            <div class="edit"></div>
            <div class="delete"></div>
            <ul class="sponsors ui-sortable">
                    <li data-sponsorname="Katie E.">Katie E.</li>
                    <li data-sponsorname="Rachel R.">Rachel R.</li>
            </ul>
            <ul class="players ui-sortable">
                    <li class="grade-9" data-playerid="86"><label>Abby M.</label></li>
            </ul>
        </li>
        <li class="team" data-teamid="557">
            <label>Team 2</label>
            <div class="edit"></div>
            <div class="delete"></div>
            <ul class="sponsors ui-sortable">
                    <li data-sponsorname="Danielle M.">Danielle M.</li>
                    <li data-sponsorname="David J.">David J.</li>
                    <li data-sponsorname="Jeff Wilson">Jeff Wilson</li>
            </ul>
            <ul class="players ui-sortable">
                    <li class="grade-12" data-playerid="91"><label>Scottie B.</label></li>
                    <li class="grade-10" data-playerid="78"><label>Nathan P.</label></li>
            </ul>
        </li>
    </ul>

Я использую событие sortremove пользовательского интерфейса jQuery. Проблема, по-видимому, заключается в том, что этот запрос DOM происходит после удаления элемента.

$('#teams .sponsors').bind('sortremove', function (e, ui) {
    console.log(ui.item[0]);
    console.log($(ui.item[0]).closest('.team')); //not found
    console.log($(ui.item[0]).closest('.team').attr('data-teamId'));
    $.ajax({
        type: 'post',
        url: '/api/team/removeSponsor/',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({
            teamId: $(ui.item[0]).closest('.team').attr('data-teamId'),
            sponsor: $(ui.item[0]).attr('data-sponsorName')
        })
    });
});
1 2
jquery jquery-ui-sortable

1 ответ:

Вместо этого вам придется использовать событие sortreceive и таким образом получить доступ к свойству ui.sender, содержащему список, из которого пришел сортируемый объект incoming..

$('.sponsors').bind('sortreceive', function (e, ui) {
    var sender = ui.sender,
        teamId = sender.closest('.team').data('teamid'),
        sponsor = $(ui.item[0]).data('sponsorname');

    console.log(sender, teamId, sponsor);

    $.ajax({
        type: 'post',
        url: '/api/team/removeSponsor/',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({
            teamId: teamId,
            sponsor: sponsor
        })
    });
});

Демо на сайте http://jsfiddle.net/f9B8P/

1