如果外部加载元素，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函数工作得很好，我可以看到元素并与按钮进行交互，并在object标签中播放视频。 但是，当我将以下代码应用于外部文件或主文件时，则不会发生任何交互。

<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()方法之后添加的，因此没有附加事件。 在这种情况下， 事件委托将帮助您将click事件附加到此新添加的#switch元素上。

Answer 2

使用on（）

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

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

Answer 3

你应该为此使用委托

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

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