动态创建li标签与静态之间的区别

时间:2013-06-18 16:48:16

标签: jquery html5

我有问题,jQuery如何在ul中创建li标签说例子;

   $("#selectedPropertyImg_Wrapper").find("#myGallery").append("<li><img src=" + PropertyDetail.d_img_urlname[index].text() + "/></li>");

不同然后在ul中硬编码的li标签...之所以要问,因为我试图在GalleryView jQuery插件中上传图像,Loading images content dynamically from url in Gallery View plugin这对静态工作正常但似乎没有动态创建代码,即使我已经测试过它生成了正好的li格式标签,我在最后ajax函数中调用了galleryView插件...

非常感谢提前......

3 个答案:

答案 0 :(得分:4)

动态创建的代码没有监听器“附加”它。您将需要重新附加或重新初始化您对新生成的代码所拥有的任何侦听器/插件

$('#selector').append("<li>Add my code</li>");
$('#selector li').myplugin();

答案 1 :(得分:1)

您尝试在动态创建的li元素和不动态创建的li元素之间解决的答案都包含在“何时以及如何”加载动态li元素中。 This article简要介绍了我所说的内容。

提前加载动态元素(在DOM准备好之前),不应该干扰插件逻辑。您只需要提前确保您的项目已加载,而不是确保您的ajax请求成功或完成。那时候已经太晚了。

更新

在AJAX请求中,将外部HTML加载到页面上,然后在done()上,创建/加载其他动态li元素,然后运行您的插件[所有这些内容你的done()funciton()]。

看看是否有帮助

答案 2 :(得分:0)

我有解决方案。我的动态元素(li标签)在dom准备好时不可用。所以我制作了separte jQuery插件,调用xml并读取和验证图像。一旦验证完成,我将我的li附加到URL。然后我有另一个jquery插件来读取其余的xml数据。我在document.ready函数下的html页面我调用了图像插件,然后是第二个插件和调用GalleryView ......一切正常......

所以我希望能回答我的问题和解决方案......

$.fn.initializeImg = function (CP_ID) {

$.ajax({
    type: "GET",
    url: "XML4.xml",
    dataType: "xml",
    async:false,
    success: function (xml) {

           $("#selectedPropertyImg_Wrapper").find("#myGallery").append("<li><img src= " + gb_var.j_propertyImgURLs[index].text() + " /></li>");

在html页面

  $(document).ready(function () {

    //initialize gallery images from url//

        $(this).initializeImg(requested_Property);


        //-------pass property ID to plugin ----//

        $(this).getPropertyDetail(requested_Property);


        //-----image gallery view---//
        $(function () {
            $('#myGallery').galleryView({
                panel_width: 750,
                panel_height: 500,
                frame_width: 100,
                frame_height: 67
            });
        });
   }