jquery - 如何通过事件 "sortremove"查询 DOM 以获取属性值

Question

当“赞助商”从一个团队拖到另一个团队时，我需要运行 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>

我正在使用 jQuery UI 的 sortremove 事件。问题似乎是在删除项目后发生的 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')
        })
    });
});

Answer 1

您必须改用 sortreceive 事件，从而获得对 ui.sender 属性的访问权限，该属性保存传入的列表 可排序来了..

$('.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/