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

Unable to apply jquery effect function to dynamically created elements

本文关键字:动态 应用于 创建 元素 函数 jquery      更新时间:2023-09-26

我正在做一个流星应用程序。我有一些动态信息框,将根据数据库详细信息显示在谷歌地图中。我正在尝试在信息框自定义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.
    }

};

谢谢。

据我所知,jQuery对象似乎没有一个名为"effect"的方法...

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

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

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

。更新

:基于更新的代码

  1. 元素elem没有添加到 dom 树中,您可能需要像$('body').append(elem)一样将其附加到正文中
  2. id
  3. variabel elemID 在循环中不会更改,从而导致创建具有相同 id 的多个元素 - 这是无效的
  4. 选择器$("#elemID")是错误的,因为它寻找一个带有 id elemID的 elemetn,其中 elemID 是一个保存实际 id 的变量,所以它应该$("#" + elemID)