无法将 jquery 效果函数应用于动态创建的元素答案

【问题标题】：Unable to apply jquery effect function to dynamically created elements无法将 jquery 效果函数应用于动态创建的元素
【发布时间】：2013-09-25 12:49:56
【问题描述】：

我正在做一个流星应用程序。我有一些动态信息框，它们将根据数据库详细信息显示在谷歌地图中。当其中的数据发生变化时，我试图为信息框自定义 div 提供一些 jquery 效果。问题是 jquery 效果功能不起作用，因为似乎 div 元素的创建还没有完全完成，无法正常工作。我尝试使用 setTimeout 和 Meteor.defer，但它仍然无法正常工作。如何克服这种情况？

Template.myTemplate.rendered = function() {

    //some code

    if (!rendered) {

        //map rendering code

        this.rendered = true;

    }

    for (var i = 0; i < count; i++) {

        //some code

        var elem = document.createElement("div"); //custom div to be used in infobox
        elem.id = i+'_div'; // id is dynamic
        elem.innerHTML = '<div><b>' +some_data +'</div>';

        var elemInfoBoxOptions = {
            content: elem,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-20, 0),
            zIndex: null, boxStyle: {opacity: 1, width: "100px"},
            infoBoxClearance: new google.maps.Size(1, 1),
            visible: true,
            pane: "floatPane",
            enableEventPropagation: false,
            closeBoxURL: ''
        };

        var elemInfobox = new InfoBox(elemInfoBoxOptions);
        elemInfobox.setPosition(new google.maps.LatLng(latitude, longitude));
        elemInfobox.open(map);

        $("#"+i+"_div").effect('highlight', {color: 'red'}, 1000); //Tried putting this code inside setTimeout and Meteor.defer. Did not work.

    }


};

谢谢。

【问题讨论】：

这是id为elemID的元素
elemID 元素在哪里以及它是如何创建的？
结果看起来像是可以用css和会话变量组合来完成的。看看选择的玩家是如何在流星leaderboard example中突出显示的。
为什么要使用 jQuery 来生成 DOM 元素而不是 Meteor 模板？尝试在 Meteor 中使用 jQuery 就像尝试在 Kiva 仓库中手动移动盒子一样。如果您需要以特别的方式创建 DOM 元素，您应该查看 Meteor.render 的魔力。另外，jQuery 不能选择不在页面上的元素。

标签： javascript meteor

【解决方案1】：

据我所知，jQuery 对象似乎没有名为“效果”的方法...

【讨论】：

【解决方案2】：

从外观上看，您想突出显示刚刚创建的 div 元素，该元素由变量 elem 引用，所以试试

$(elem ).effect('highlight', {color: 'red'}, 1000);

还要确保在调用 effect 之前将元素添加到 dom。

更新：基于更新的代码

元素elem 没有添加到dom 树中，你可能需要像$('body').append(elem) 一样将它附加到body 中
id 变量elemID 没有在循环中更改 with，导致创建多个具有相同 id 的元素 - 这是无效的
选择器$("#elemID") 是错误的，因为它会查找ID 为elemID 的元素，其中elemID 是一个保存实际ID 的变量，所以它应该是$("#" + elemID)

【讨论】：

我实际上也在做同样的事情。我已经更新了代码 sn-p。
不，你不是，你使用的是选择器$("#elemID")，而我使用的是$(elem )
1.请注意，我正在创建一个要在地图中使用的信息框。将 div 元素添加到信息框。请参阅“elemInfoBoxOptions”变量。 2 & 3. 更新了错字问题。
@Anoop 好的，我错过了...但第 1 点和第 2 点仍然存在
1.请参见倒数第二行 3 行。这就是如何将元素设置为信息框并随后将信息框设置为映射。 2.请看代码。没关系。