javascript - 如果外部加载元素，jQuery 将无法工作

Question

我正在将一个外部 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>

Answer 1

尝试使用 on() :

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

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