How to append flexislider on ajax response dynamically?

Question

I need to append jquery flexislider on ajax response. Below is my code: console.log(response.data);

                $('.status').append(response.data);
                $('.flexslider').flexslider({
                animation: "slide",
                slideshow: true,
                animationSpeed: 1000,
                animationLoop: true,
                itemWidth: 311,
                itemMargin: 5,
                controlNav: false,
                slideshowSpeed : 1000,
                pauseOnHover : true,
                pauseOnAction : true,
                touch : true,

                start: function(slider){
                  flexslider = slider;
                }
              });

it append only html not working slider.Anyone have idea about How to append flexislider on ajax response.If you have any idea about it let me know.

If it appends the HTML you have to re-bind flexslider to the new HTML. — Jay Blanchard, Jul 31 '15 at 12:01

score 0 · Answer 1 · edited May 23 '17 at 12:21

jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. When this occurs you must either re-bind the functionality to the newly added items or use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load.

Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load..

How to append flexislider on ajax response dynamically?

1 Answers1