在Ajax加载的外部html中调用事件。

I have an Ajax Loaded Div in my page and, inside that div, a Jquery plugin load my Google Spreadsheet. I need to add some "event listening" to detect when that spreadsheet is loaded, but there is a problem with the unpredictable time to load and the fact that a event INSIDE my div (with external html content), as far as I know, can't be listened on my "parent" window. I've tried many ways to do that, by the way.

我的页面中有一个Ajax装载的Div，在这个Div中，有一个Jquery插件装载我的谷歌电子表格。我需要添加一些“事件监听”来检测何时加载电子表格，但是有一个问题，即不可预知的加载时间以及我的div(带有外部html内容)中的事件(据我所知)不能在“父”窗口中侦听。顺便说一下，我试过很多方法。

I'll post my code, but I don't think it can help. What can I say is: The height of my div change when the content is loaded. The Callback function can't work in this case 'cause my script (inside div) only get the spreadsheet after load the page.

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

index.html

index . html

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

test/index.html

测试/ index . html

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

Any ideia about some event listening in my case? Thanks!

在我的案例中，任何关于事件的想法?谢谢!

EDIT:

编辑:

jrummell answer gave me the ideia to ignore the external html file using the plugin inside the same page, so, I could use the callback function of "sheetrock", as suggested by Andre.

jrummell的回答给了我一个ideia，让我可以在同一个页面内使用插件来忽略外部的html文件，这样我就可以像Andre建议的那样使用“sheetrock”的回调函数。

Thanks for the answers!!

谢谢你的答案! !

New code:

新代码:

$("#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() {
  } 
  }); 
});

3 个解决方案

#1

Try initializing your spreadsheet plugin after the content is loaded:

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

$.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");
    }
 });

#2

You can use Jquery on() event listening, like this:

您可以在()事件监听中使用Jquery，如下所示:

$('.mailcontrol').on('eventName', '#dat', callbackFunction);

The "selector" parameter is a selector string to filter the descendants of the selected elements that trigger the event. In your case "#dat". I suggest using "resize" as eventName.

“选择器”参数是一个选择器字符串，用于筛选触发事件的选定元素的后代。在你的情况中“# dat”。我建议使用“resize”作为eventName。

Reference: http://api.jquery.com/on/

参考:http://api.jquery.com/on/

#3

Have you tried the original sheetrock callback?

你试过最初的sheetrock回调吗?

$('#dat').sheetrock({
  url: 'https://docs.google.com/spreadsheets/ssid',
  callback: function() {
      //trigger event to be caught 
  }  
});

Reference: https://github.com/chriszarate/sheetrock#callback

参考:https://github.com/chriszarate/sheetrock回调

#1