javascript - 在 Ajax 加载的外部 html 中的脚本后调用事件

Question

我的页面中有一个 Ajax 加载的 Div，在该 div 中，一个 Jquery 插件加载了我的 Google 电子表格。我需要添加一些“事件监听”来检测何时加载该电子表格，但据我所知，加载时间不可预测以及我的 div 内部事件(具有外部 html 内容)的事实存在问题，无法在我的“父”窗口上收听。顺便说一句，我已经尝试了很多方法来做到这一点。

我会发布我的代码，但我认为它没有帮助。我能说的是:加载内容时，我的 div 的高度会发生变化。回调函数在这种情况下不起作用，因为我的脚本(在 div 内)仅在加载页面后获取电子表格。

index.html

$.ajax({
    url : "test/index.html",
    type : "get",
    async: true,
    success : function(result) {
    $('.mailcontrol').html(result);
    },
    error: function() {
       alert("Error");
    }
 });

test/index.html

<script type="text/javascript">
$('#dat').sheetrock({
  url: 'https://docs.google.com/spreadsheets/ssid'}); 
</script>

关于在我的案例中监听某些事件有什么想法吗？谢谢!

编辑:

jrummell 的回答给了我使用同一页面内的插件忽略外部 html 文件的想法，因此，我可以按照 Andre 的建议使用“sheetrock”的回调函数。

感谢您的回答!!

新代码:

$("#target2").click(function () {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'sheetrock.min.js';
$("#dat").append(script);
$('#dat').sheetrock({
  url: 'https://docs.google.com/spreadsheets',
    callback: function() {
  } 
  }); 
});

Answer 1

尝试在加载内容后初始化您的电子表格插件:

$.ajax({
    url : "test/index.html",
    type : "get",
    async: true,
    success : function(result) {
        $('.mailcontrol').html(result);
        $('#dat').sheetrock({
            url: 'https://docs.google.com/spreadsheets/ssid'}); 
    },
    error: function() {
       alert("Error");
    }
 });