如何使用ajax调用将类添加或绑定到动态加载的数据的父元素和子元素？

Question

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.

Answer 1

try this code:

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

Answer 2

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.