Jquery event only works on element in the page, not the one coming from server using ajax

Question

i have some images in my page, inside a UL, and some is taken from server with a ajax call and appended on to the list. they all have same class and the jquery click event is given to elements with that class. but only the ones already in the page is triggered, and the ones coming from server is not.

JS

// when document gets ready(DOM tree initialized)
$(document).ready(function(){
// ********************************************variable declarations
var baseUrl = "http://192.168.0.11/mvc/"; // server address
var length1 = 0; //length from server to be stored.
var b=3;    //end point         
var a=1;    //start poing
var img=null;
var num=0;

// ********************************************first AJAX call to get total number of Images in server
  $.ajax({
        type: "POST",
        dataType: "json",         
        url: baseUrl+"imageListService.ashx?length=0",
    })

    .done(function(data) {                  
         length1=data;
         console.log(length1);
    })

    .fail(function() {
        console.log("error");
    })          
// ******************************************** Display modal on load
// $('#testModal').modal('show'); 

// ******************************************** Image Gallery Popup
$(".imageGallery").click(function(){
    console.log(img+"first");
    img = $(this).attr("name"); //image source
    console.log(img+"second");
    num = $(this).attr("alt"); //image name
    $('#popup').html("<div> <p>Photo No: "+num+"</p> </div> <img src="+img+"></img>");
    $("#popup p").addClass("popupName");            
    $("#popup img").addClass("popupImg");
    $("#popup div").addClass("popupNameBg");
    $('#popup').slideDown("300",function(){

    })              
})

$('#popup').click(function(){           
        $('#popup').slideUp("300");
        // img = 0;
        // $('#popup img').remove();
        console.log(img+"third");
        // return false;
})



// ********************************************On scroll load images function.
$(window).scroll(function() {   

    if($(window).scrollTop() === $(document).height() - $(window).height()){
            // Second AJAX call to load images based on start(a) and end points(b)
            if(b>length1)return; // stop loading once images in server are all loaded. 
                console.log($(window).scrollTop());
            console.log("start"+a+ "end"+b);
            $.ajax({
                type: "POST",
                dataType: "json",                   
                url: baseUrl+"imageListService.ashx?start="+a+"&end="+b,                
            })

            .done(function(data) {      
                a=b+1;
                b=b+3;          
                $(data).each(function (i, item) {
                    $('.imageContainer ul').append(item.Link);                       
                 });  
                 window.scrollBy(0,-50); // scroll the window 'horizontal', 'vertical'          
            })

            .fail(function() {
                console.log("error");
            })          

    } // end of scrollTop           

}); // end of window.scroll

}); // end of document.ready

HTML
<div id="popup"></div>
<div class="imageContainer">
<ul id="list">
    <li><img src="img/thumpnails/IMG_3526.jpg" name="img/IMG_3526.jpg"     class="imageGallery" alt="3526"></li>
    <li><img src="img/thumpnails/IMG_3528.jpg" name="img/IMG_3528.jpg" class="imageGallery" alt="3528"></li>
    <li><img src="img/thumpnails/IMG_3529.jpg" name="img/IMG_3529.jpg" class="imageGallery" alt="3529"></li>
    <li><img src="img/thumpnails/IMG_3531.jpg" name="img/IMG_3531.jpg" class="imageGallery" alt="3531"></li>
    <li><img src="img/thumpnails/IMG_3533.jpg" name="img/IMG_3533.jpg" class="imageGallery" alt="3533"></li>
    <li><img src="img/thumpnails/IMG_3535.jpg" name="img/IMG_3535.jpg" class="imageGallery" alt="3535"></li>
    <li><img src="img/thumpnails/IMG_3537.jpg" name="img/IMG_3537.jpg" class="imageGallery" alt="3537"></li>
    <li><img src="img/thumpnails/IMG_3538.jpg" name="img/IMG_3538.jpg" class="imageGallery" alt="3538"></li>
    <li><img src="img/thumpnails/IMG_3539.jpg" name="img/IMG_3539.jpg" class="imageGallery" alt="3539"></li>
    <li><img src="img/thumpnails/IMG_3540.jpg" name="img/IMG_3540.jpg" class="imageGallery" alt="3540"></li>
    <li><img src="img/thumpnails/IMG_3541.jpg" name="img/IMG_3541.jpg" class="imageGallery" alt="3541"></li>
    <li><img src="img/thumpnails/IMG_3542.jpg" name="img/IMG_3542.jpg" class="imageGallery" alt="3542"></li>
    <li><img src="img/thumpnails/IMG_3543.jpg" name="img/IMG_3543.jpg" class="imageGallery" alt="3543"></li>
    <li><img src="img/thumpnails/IMG_3544.jpg" name="img/IMG_3544.jpg" class="imageGallery" alt="3544"></li>
    <li><img src="img/thumpnails/IMG_3545.jpg" name="img/IMG_3545.jpg" class="imageGallery" alt="3545"></li>
    <li><img src="img/thumpnails/IMG_3546.jpg" name="img/IMG_3546.jpg" class="imageGallery" alt="3546"></li>
    <li><img src="img/thumpnails/IMG_3549.jpg" name="img/IMG_3549.jpg" class="imageGallery" alt="3549"></li>
    <li><img src="img/thumpnails/IMG_3551.jpg" name="img/IMG_3551.jpg" class="imageGallery" alt="3551"></li>
    <li><img src="img/thumpnails/IMG_3552.jpg" name="img/IMG_3552.jpg" class="imageGallery" alt="3552"></li>
    <li><img src="img/thumpnails/IMG_3553.jpg" name="img/IMG_3553.jpg" class="imageGallery" alt="3553"></li>
    <li><img src="img/thumpnails/IMG_3555.jpg" name="img/IMG_3555.jpg" class="imageGallery" alt="3555"></li>
    <li><img src="img/thumpnails/IMG_3557.jpg" name="img/IMG_3557.jpg" class="imageGallery" alt="3557"></li>
    <li><img src="img/thumpnails/IMG_3559.jpg" name="img/IMG_3559.jpg" class="imageGallery" alt="3559"></li>
    <li><img src="img/thumpnails/IMG_3560.jpg" name="img/IMG_3560.jpg" class="imageGallery" alt="3560"></li>
    <li><img src="img/thumpnails/IMG_3562.jpg" name="img/IMG_3562.jpg" class="imageGallery" alt="3562"></li>
    <li><img src="img/thumpnails/IMG_3564.jpg" name="img/IMG_3564.jpg" class="imageGallery" alt="3564"></li>
    <li><img src="img/thumpnails/IMG_3565.jpg" name="img/IMG_3565.jpg" class="imageGallery" alt="3565"></li>
    <li><img src="img/thumpnails/IMG_3566.jpg" name="img/IMG_3566.jpg" class="imageGallery" alt="3566"></li>
    <li><img src="img/thumpnails/IMG_3567.jpg" name="img/IMG_3567.jpg" class="imageGallery" alt="3567"></li>
    <li><img src="img/thumpnails/IMG_3569.jpg" name="img/IMG_3569.jpg" class="imageGallery" alt="3569"></li>        
</ul>   
</div>

CSS
body{
background-color: #1c1c1c;
}
#bg_body{
width: 100%;
height: auto;
position: fixed;
z-index: -100;
}
.imageContainer{
width: 960px;
height: auto;
overflow: hidden;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;    
}
.imageContainer > ul li{
display: inline-block;
list-style: none;
float: left;
}
#list li{
width: 150px;
height: 100px;
/*background-color: rgba(73,73,73,0.6);*/
margin-left: 50px;
margin-top: 50px;
overflow: hidden;
}
.imageGallery{
height: 100%;
width: auto;        
overflow: hidden;
margin-left: auto;
margin-right: auto;
display: block;
border: 1px solid #fffaf1; 
}
#popup{
position: fixed;
width: auto;
height: 90%;
background-color: rgba(80,80,80,0.99);
transform:translate(-50%,-50%); /* another way of making negative margin, for fixed elements*/
display: none;  
border-radius: 3px;
/*margin-left:-300px;*/
left: 50%;
top: 50%;
/*overflow:hidden;*/
padding:10px;
z-index: 2000;
}
.popupImg{
height:90%;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
border: 2px solid #f15f17;
}
.popupName{
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-style: italic;
color: #ffd98e;
margin:0px;
/*margin-left: auto;
margin-right: auto;*/
/*text-align: center;   */
position: relative;
padding: 0px;   
}
.popupNameBg{
width: 50%;
height: auto;
padding: 5px;
/*text-align: center;*/
/*background-color: #f5f5f5;*/
/*border-radius: 1px;*/
margin-left: 5px;
position: absolute;
bottom: 10px;
z-index: 2002;
}

Wrap `$('#popup').click..` inside a function and invoke it from callback of the ajax call. — Pramod Karandikar, Jan 28 '15 at 04:21

score 1 · Accepted Answer · answered Jan 28 '15 at 04:18

1

just use

$(document).on('click', '#selector', function(){}

According to Jquery document, when binding event this way:

$(selector).click(){};

This is only effective if the html tags have been rendered already. In order to bind events to elements which are fetched from server. You need to use the above way.

answered Jan 28 '15 at 04:18

Klaus

451
5
8

Exactly. `click()` is a shortcut of `bind('click',callback)` which only works on elements that are already present in the DOM or the elements that are not likely to change, but if your elements are changing either because of changing some attributes or by appending new elements to the DOM, `bind()` will not work, in that case use `on()` in 1.7+ which replaces `live()' present in versions below 1.7 – Arkantos Jan 28 '15 at 06:40

Jquery event only works on element in the page, not the one coming from server using ajax

1 Answers1