jQuery代碼確實更新後工作

Question

我有一個頁面，其中即時搜索結果顯示使用PHP & AJAX和<a>標籤onclick從響應項目，它會生成軌道的預覽。一切工作正常，但當我更新我的jQuery版本從1.7.2到1.11.3或2.1.4。它打開鏈接而不是生成預覽。

我的代碼

<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function($) 
{ 
    $(".videos .expand-video a.soundcloud").live("click", function(){ 
      var scURL = $(this).attr("href"); 
      var scID = $(this).attr("id"); 
      var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false\"></iframe>"; 
      $("#sc-"+scID).html(embedAudio); 
      return false; 
    }); 


    var timer = null; 
    $("#keyword").keyup(function() 
    { 

     if(timer) 
     { 
      clearTimeout(timer); 
     } 
     timer = setTimeout(function() 
     { 
       var sc_keyword = $("#keyword").val(); 
       var obj = $(this); 

       if(sc_keyword != '') 
       { 
        $(".ajax_indi").show(); 
        var str = $("#fb_expand").serialize(); 
        $.ajax({ 
         type: "POST", 
         url: "fetch.php", 
         data: str, 
         cache: false, 
         success: function(htmlresp) 
         { 
          $('#results').html(htmlresp); 
          $(".ajax_indi").hide(); 
         } 
        }); 

       } 
       else 
       { 
        alert("Search for your favourite news"); 
        $("#keyword").focus(); 
       } 
     }, 1000); 

    }); 

}); 
</script> 

我知道.live()已1.9版本起被刪除。所以，我試圖將其更新到.on()但並沒有這樣做成功

我試圖從.live()到.on()更新低於Ajax請求的

$(".videos .expand-video a.soundcloud").on("click", 'a', function(){ 
     var scURL = $(this).attr("href"); 
     var scID = $(this).attr("id"); 
     var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false\"></iframe>"; 
     $("#sc-"+scID).html(embedAudio); 
     return false; 
}); 

HTML輸出響應

<div class="videos" id="sc-80912043"> 
    <div class="expand-video"> <a class="soundcloud" id="80912043" href="https://api.soundcloud.com/tracks 
/80912043"><span></span> <img src="https://i1.sndcdn.com/avatars-000033051760-4ugg0i-large.jpg" width 
="120" height="90" title="Play" alt="Play"/> </a> </div> 
    <div class="details"> 
    <h6>DJ MHA - Menu Chad De (MHA Remix)</h6> 
    <p class="link">Gangzta Khan</p> 
    <p class="desc">DJ MHA - Menu Chad De (MHA Remix).. 
Gangzta Khan ..</p> 
    </div> 
</div> 

<div class="videos" id="sc-24508938"> 
    <div class="expand-video"> <a class="soundcloud" id="24508938" href="https://api.soundcloud.com/tracks 
/24508938"><span></span> <img src="https://i1.sndcdn.com/avatars-000002625883-ve8pmk-large.jpg" width 
="120" height="90" title="Play" alt="Play"/> </a> </div> 
    <div class="details"> 
    <h6>Halka Halka Suroor - MHA Mix</h6> 
    <p class="link">DJ MHA</p> 
    <p class="desc">Yeh Jo Halka Halka Suroor Hai 
Direct Download Link: 
http://www.djmha.com/get.php?file=Halka_Halka_Suroor_-_MHA_Mix.mp3</p> 
    </div> 
</div> 

<div class="videos" id="sc-65996317"> 
    <div class="expand-video"> <a class="soundcloud" id="65996317" href="https://api.soundcloud.com/tracks 
/65996317"><span></span> <img src="https://i1.sndcdn.com/avatars-000002625883-ve8pmk-large.jpg" width 
="120" height="90" title="Play" alt="Play"/> </a> </div> 
    <div class="details"> 
    <h6>Zarina Taylor - (DJ MHA Remix)</h6> 
    <p class="link">DJ MHA</p> 
    </div> 
</div> 

Answer 1

在調用.on()之前，您對選擇器太具體了。函數的工作方式是選擇頁面上始終存在的元素，並將委託的事件處理程序綁定到這些元素。既然你更換與videos類<div>元素的內容，你的代碼應該是這樣的：

$(".videos").on("click", ".expand-video a.soundcloud", function(){ 
     var scURL = $(this).attr("href"); 
     var scID = $(this).attr("id"); 
     var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false\"></iframe>"; 
     $("#sc-"+scID).html(embedAudio); 
     return false; 
}); 

首先，我們選擇.videos元素，那麼我們綁定了a.soundcloud元素委託的事件，其任務是內部.expand-video元素（它們又在.videos元素內）。這樣，當您更新此行中的某個元素的內容時（$("#sc-"+scID).html(embedAudio);），委派的事件處理程序仍然存在。

Answer 2

我不知道爲什麼這在舊版本中工作！

所以只是一個視頻

<div class="videos" id="sc-80912043"> 
    <div class="expand-video"> <a class="soundcloud" id="80912043" href="https://api.soundcloud.com/tracks 
/80912043"><span></span> <img src="https://i1.sndcdn.com/avatars-000033051760-4ugg0i-large.jpg" width 
="120" height="90" title="Play" alt="Play"/> </a> </div> 
    <div class="details"> 
    <h6>DJ MHA - Menu Chad De (MHA Remix)</h6> 
    <p class="link">Gangzta Khan</p> 
    <p class="desc">DJ MHA - Menu Chad De (MHA Remix).. 
Gangzta Khan ..</p> 
    </div> 
</div> 

這是一個問題，我有過幾次，即使它應該。對不作爲一樣活與活性結合...

function gotAJAXResults(){ 
    $(".videos .expand-video a.soundcloud").unbind("click"); 
    $(".videos .expand-video a.soundcloud").click(function(e){ 
      e.preventDefault(); 
      var scURL = $(this).attr("href"); 
      var scID = $(this).attr("id"); 
      var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false\"></iframe>"; 
      $("#sc-"+scID).html(embedAudio); 
      return false; 
    }); 
} 

確定，所以現在你的AJAX調用變得

$.ajax({ 
    type: "POST", 
    url: "fetch.php", 
    data: str, 
    cache: false, 
    success: function(htmlresp) 
    { 
     $('#results').html(htmlresp); 
     gotAJAXResults(); 
     $(".ajax_indi").hide(); 
    } 
}); 

這種方法將迫使它來綁定連當ajax收到並插入到頁面中時。 （DOM示波器）