difference between dynamically created li tag vs static

Question

I got question, how li tag created in ul by jQuery say example;

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

different then the li tag hard coded in ul... the reason why asking because i am trying to upload images in GalleryView jQuery plugin, Loading images content dynamically from url in Gallery View plugin which works fine with static but doesn't seems dynamically created code, even i have tested it generate exactly li format tag and i am calling galleryView plugin at the end ajax function...

many thanks in advance...

yes, i have detail code in http://stackoverflow.com/questions/17173595/loading-images-from-url-in-gallery-view-plugin — K.Z, Jun 18 '13 at 16:51

score 4 · Answer 1 · answered Jun 18 '13 at 16:51

4

The dynamically created code does not have the listeners 'attached' to it. You will need to reattach or reinitialize any listeners/plugins that you have to the newly generated code

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

answered Jun 18 '13 at 16:51

Patrick

861
6
12

2

+1, attaching listeners to possibly dynamic html should be done using [`.on()`](http://api.jquery.com/on/) – iambriansreed Jun 18 '13 at 16:56
but OP already said: <> – A. Wolff Jun 18 '13 at 17:05
@roasted From OP's language, I was unsure as to the precise order of actions. Whether the statements are actually occurring in the ajax or what the ajax call even does. Would this 'answer' generally be preferred as a comment until that becomes clear? – Patrick Jun 18 '13 at 18:00
i have called the plugin in ajax{}.done(function(){...// call plugin} )}; i thought initially it should complete before everything but i guess is not happening – K.Z Jun 18 '13 at 18:12

score 1 · Answer 2 · edited May 23 '17 at 12:05

The answer you are trying to figure out between an li element that is dynamically created and one that is not, is all wrapped in "when and how" you load your dynamic li element. This article gives a brief description of what I'm talking about.

Loading your dynamic element ahead of time (before the DOM is ready), should not interfere with your plugin logic. You just need to make sure your items are loaded way ahead of time, not on success or done of your ajax request. By that time, it's too late.

update:

Within an AJAX request, load your external HTML onto the page, then on done(), create / load the additional dynamic li element, AND THEN run your plug-in [all of this within your done() funciton()].

See if that helps

i thought something similar and that is why for plugin call at the end of ajax... but problem is i am reading url link from xml file in ajax function ... so i don't have much room to play i guess!!!!!! — K.Z, Jun 18 '13 at 18:10

K.Z · Accepted Answer · 2013-06-20T13:53:14.340

I have the solution. my dynamic elements (li tags) weren't available at the time the dom was ready. so i made separte jQuery plugin, call the xml and read and validate images. once validation complete i append my li along with URL. then I have another jquery plugin to read rest of xml data. I html page under document.ready function i call images plugin, followed by 2nd plugin and the call GalleryView... all works ...

so i hope this answer to my question along with solution...

$.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>");

in html page

  $(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
            });
        });
   }

difference between dynamically created li tag vs static

3 Answers3

Linked