Question

我正在构建一个动态加载来自数据库的内容的页面。加载内容后，我希望触发一个事件来执行某些操作。

我无法使用window.onload事件，因为在加载初始页面之前，会在添加内容之前触发该事件。

我一直在尝试向我附加到div的变量添加一个加载命令，但它不会触发。

我假设我忘记了一些愚蠢的事情，但我找不到什么。

  var html = '<div class="messageContent"><img src="http://www.microadagencies.com/wp-content/uploads/2015/08/Dont-be-Evil-by-Google.jpg" /></div>\r\n';

  var objToAppend = $(html).on('load', function() {
    alert('loaded')
  });

  $('#test').append(objToAppend);

有人能发现我做错了吗？

JSFiddle：https://jsfiddle.net/215yuxyk

Answer 1

更改您的JavaScript添加功能，如下所示

    function add() {
        var tempdiv = $('<div class="messageContent">');
        var tempimg = $('<img src="http://www.microadagencies.com/wp-content/uploads/2015/08/Dont-be-Evil-by-Google.jpg" /></div>\r\n');
        tempimg.on('load', function () {
            alert('loaded');
        });

        tempdiv.append(tempimg);

        $('#test').append(tempdiv);
    }

这是工作小提琴手：https://jsfiddle.net/215yuxyk/3/

Answer 2

您可以尝试将实时事件绑定到文档。

$('html').on('DOMNodeInserted DOMNodeRemoved', function(e) {
// your code
});

这会将事件绑定到html，对DOM的更改将触发上述方法。

JQuery将（加载）事件添加到动态创建的元素

2 个答案: