分离后无法附加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

回答

相关问题