如果外部加载元素，jQuery 将不起作用答案

【问题标题】：jQuery won't work if externally loaded elements如果外部加载元素，jQuery 将不起作用
【发布时间】：2014-04-10 07:21:45
【问题描述】：

我正在将一个外部 php 文件导入到另一个 php 文件中。

外部文件：

function featured($featured) {
echo '<button id="switch">CLICK ME!</button>';
echo '<object type="application/x-shockwave-flash" height="427" width="700" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=blahblah" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=blahblah&auto_play=true&start_volume=25" /></object>';
}

主文件：

<div id="div">
</div>

<script>
    var xmlhttp;

    function loadXMLDoc(url, varString, cfunc){
        if (window.XMLHttpRequest)
            xmlhttp=new XMLHttpRequest();
        else
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("POST", url, false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    var channel = window.location.search;
                    if(channel.length>0)
                            varString = channel.substring(1);
        xmlhttp.send(varString);
    }   
    loadXMLDoc("external.php", "channel=", function(){ 
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.getElementById("div").innerHTML=xmlhttp.responseText;
    });
</script>

loadXMLDoc 函数工作得非常好，我可以看到元素并与按钮交互并在对象标签中播放视频。但是，当我将以下代码应用于外部文件或主文件时，我没有得到任何交互。

<script>
$(document).ready(function(){
$( "#switch" ).click(function() {
  $( "object" ).attr("data", myNewURL);
});
});
</script>

【问题讨论】：

jQuery - Click event doesn't work on dynamically generated elements的可能重复

标签： javascript php jquery object embed

【解决方案1】：

尝试使用on()：

$(document).ready(function(){
    $('body').on('click', "#switch", function() {
        $( "object" ).attr("data", myNewURL);
    });
});

您的#switch 元素是在.click() 方法之后添加的，因此它没有附加事件。在这种情况下，event delegation 将帮助您将点击事件附加到这个新添加的#switch 元素。

【讨论】：

【解决方案2】：

使用 on()

on() 将一个或多个事件的事件处理函数附加到所选元素。

<script>
$(document).ready(function(){
 $('body').on('click', "#switch", function() {
        $( "object" ).attr("data", myNewURL);
    });
});
</script>

【讨论】：

【解决方案3】：

您应该为此使用delegate

$(document).on("click","#switch",function(){
   //some operation
});

它可以帮助您为外部加载的元素附加处理程序

【讨论】：