How to add or bind classes to both parent and child elements of dynamically loaded data using ajax call?

0
votes

I am new to jQuery and am struggling here from past 1 week.I am loading the data from JSON array using an ajax call, And using a one "swipe" plugin to swipe and load all the images over my page on same div. But I don't know how to add the class to both parent div and child elements. my code is:

    url : "http://my_ip/App/event_h/get_a_evnts",
    type:"POST",
    dataType:"json",
    success: function(data)
    {
        var event1=data.event1;
        var total_event=event1.length;
        var event1=data.event1;
        var DOM=$('#DOM');
        var path="http://my_ip/App/";
        var media1=data.media;
        var location=json.location; 
        var event2=data.event;
        var rating=data.rating;
        var event1[i].event_id =1;//this value also retrived from json array
        var output= '<div class="container-fluid" ><section class="row">';
            output +='<div class="col-sm-12 col-md-12 col-xs-12"><div class="panel panelstyle">';
            output +='<header><h1><small>Event : </small>'+event1[i].event_title+'</h1></header><div class="panel-body">';
            output +='<div id="div1" class="swiper-container" ><div  id="div2" class="swiper-wrapper"  >';
              for(j=0; j<media1.length; j++) {
                if(event1[i].event_id === media1[j].event_id){
                 output +='<img id="newimg" class="swiper-slide" src='+path+media1[j].media_path+' alt="new image" />';
                }
              }});

i didn't write complete code here only required part i have written an also in the above code everything is works fine not even a single error in console but .swiper-container,.swiper-container,.swiper-slide are not loading when the page loads so I cannot swipe my images. I have tried "on","delegate" an "bind" but am unable to attach those class when the page loads.

2
javascriptjquerycssajaxswiper
Is this your complete code? – VJS
bind your swipe event for dynamic added element, or call it at end after ajax success – Satinder singh
No its not.I am fetching lot of data and above i had written code to retrieve some images which belong to some category which i want to swipe using swiper plugin . But i dono how to bind the class.. – Sharan Rai
pls provide link of that plugin which you have used – Satinder singh
What's the plugin (link maybe?) and where is it defined/initialized? – Samurai

2 Answers

0
votes

try this code:

output = $(output);
output.addClass(".swiper-container");
0
votes

The parent element that you are referring to is not necessarily the immediate parent it can be any element present at when document is ready and the element on which you have to bind event is descendent of it. In worst case there is body element.

or

You can add the slide event in inside the success function once the dynamically created html has been inserted into the page.