分離後無法附加div

我有一個不包含音頻播放器的div。提交表單時，它會克隆div並刪除原始div，以便在從服務器獲取新鏈接時，克隆的div將通過新鏈接附加到音頻源。刪除它後，我無法附加div，儘管克隆div存在。我檢查過克隆的div是否存在，它存在。我試圖根據新的用戶請求播放音頻。數據從服務器成功獲取。分離後無法附加div

這是div

<div class="audioDiv"> 
    <audio controls="controls" id="audioplayer"> 
     <source src="" type="audio/mp3" class="audioSource"/> 
     <source src="" type="audio/ogg" class="audioSource"/> 
    </audio> 
</div>

這是腳本

$(document).ready(function(e){ 
$("#loading").hide(); 

var form = $('#player-form'); 

var u; 
form.submit(function (e) { 
    var cloneDiv = $("#audioplayer").detach(); 
    e.preventDefault(); 

    $.ajax({ 
     type: form.attr('method'), 
     url: form.attr('action'), 
     data: form.serialize(), 
     dataType : 'json', 
     timeout : 100000, 
     beforeSend:function(){ 
      $("#loading").show(); 
     }, 
     complete:function(){ 
      $("#loading").hide(); 
     }, 
     success : function(data) { 
      console.log("SUCCESS: ", data.link); 
      $(".audioSource").attr('src',data.link); 

      $(cloneDiv).appendTo('.audioDiv'); 

      console.log(cloneDiv); 

      plyr.setup(); 

     }, 
     error : function(e) { 
      console.log("ERROR: ", e); 
     } 
     }); 
    }); 
});

來源

2017-05-29 budthapa

的ID從它似乎是邏輯的重新安裝應該可以正常工作，因爲你沒有刪除'#audioDiv'。涉及到我的一個部分是你試圖用全局選擇器更新audioSource，但該字段屬於你分離的元素的子元素，所以它不應該找到它。您需要在cloneDiv中找到audioSource來更新它們，然後重新連接。 – Taplar

我更新了代碼，現在它在每個響應中附加新的音頻元素。 audioSource正在工作，因爲我移動了$（cloneDiv）.appendTo（'。audioDiv'）;在$（「。audioSource」）。attr（'src'，data.link）之前; 。我想我需要檢查音頻元素是否存在，如果不存在，則創建新的音頻元素。對此有何想法？ – budthapa

你不必audioDiv

$(cloneDiv).appendTo('.audioDiv'); 
cloneDiv.appendTo('.audioDiv');

來源

2017-05-29 15:34:54

代碼改變如上所述，我的不好。現在，每次我提交表單時，都會創建新玩家。 – budthapa

分離後無法附加div

回答

相關問題