无法将jquery效果功能应用于动态创建的元素

Question

我正在做一个流星应用程序。 我有一些动态信息框，它们将根据数据库详细信息显示在Google地图中。 我正在尝试对其中的数据更改时的信息框自定义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.

    }


};

谢谢。

Answer 1

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

Answer 2

从外观上，您要突出显示刚刚创建的由变量elem引用的div元素，因此请尝试

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

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

更新：基于更新的代码

1. 元素elem没有添加到dom树中，您可能必须像$('body').append(elem)一样将其添加到主体
2. id variabel elemID在循环中未更改，从而导致创建了多个具有相同id的元素-这是无效的
3. 选择器$("#elemID")错误，因为它查找具有id elemID ，因为elemID是保存实际ID的变量，因此应为$("#" + elemID)