Question

我有使用PHP＆amp; amp;显示即时搜索结果的页面来自响应项的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()的内容低于

$(".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 OUTPUT ajax请求的响应

<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

我不知道为什么这款旧版本有效!!!

仅适用于一个视频

<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范围）

Answer 2

在调用.on()之前，您对选择器过于具体。函数的工作方式是选择页面上始终存在的元素，并将委托的事件处理程序绑定到这些元素。由于您要使用类<div>替换videos元素的内容，因此您的代码应为：

$(".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元素内部（{1}}元素）。这样，当您更新此行中其中一个元素的内容 - $("#sc-"+scID).html(embedAudio);时 - 委托的事件处理程序仍然存在。

更新

2 个答案: