页面加载完成，通过jQuery .load加载Jquery内容，执行jQuery元素

Question

如果我想在主页加载完成后能够加载内容(包含依赖于jQuery的元素)，将从我的网站(div)上的另一个页面检索内容。那么我如何让那些依赖于jQuery的元素执行(工作)呢？

如何使这些不同的jQuery元素在加载到主页后使用一些简单的方法？我不太了解jQuery，如果我能在脚本上做一个广告/编辑函数，让它们在加载后工作，那就太好了，但它可能比这更难。在过去的几天里，我尝试初始化加载的不同对象，但请注意，使用复杂的脚本是相当困难的。

页面将加载如下所示的新内容(selectbox)：

<select id="selectbox"> 
<option>1</option>
</select>

将代码jQuery到选择框中：

$(document).ready(function(){ 
$("#selectbox").change(function(){ 
var selectedOption = $('#selectbox :selected').val(); 
$containerDiv = $('#div_that_will_get_content'); 
$containerDiv.html("");
        switch (selectedOption)
        {
        case "1":$containerDiv.load( "Page.html #div1 );break;
        }
return true;
}); 
});

选择框(1)中的选中选项从Page.html #div1收集数据，然后将数据发送到div "#div_that_will_get_content“。所以div是在主页面加载完成后加载的。

现在，如果我想在这个目录中放置一个jQuery元素，然后通过选择框将该目录加载到主页并设置为"#div_that_will_get_content"，那么这些元素就不起作用了。谁能展示一个简单的jQuery示例，简单解释一下脚本是如何从头开始编写的，以及在加载脚本后，您对其进行了哪些更改以使其正常工作？

谢谢。

Answer 1

不完全确定您需要什么，但部分答案在于使用load()的成功回调

/* define this cached elemn outside change handler so don't have to search DOM each time*/
$containerDiv = $('#div_that_will_get_content');

$("#selectbox").change(function() {
    /* val() of select is same as searching for selected option val() but less code*/
    var url = 'Page.html #div' + $(this).val();
    $containerDiv.load(url, function() { 
         /* new ajax loaded html exists you can run code here*/
        $containerDiv.find('#someOtherDiv').doSomething()
    })

});

接口参考：http://api.jquery.com/load/

如果您的问题与将事件绑定到将来随时加载的元素有关，则可以使用on()在页面加载脚本中委托这些元素

$(document).on('click', '.className', function(){
     doSomething();
})