如何查詢DOM以獲取事件「sortremove」的屬性值

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/