jquery - Duplicated JSON result -

i have made simple script call json file , show on website.

unfortunately shows double of result. problem caused pictures. if remove them text shown once want it.

here script

$(function () {  $('#members p, #members p span, #main_content span').on('click', function () {     var attr = $(this).attr('data-number');     if (typeof attr !== typeof undefined && attr !== false) {         var number = $(this).data('number');         console.log(number);         $.ajax("members.json", {             datatype: 'json',             success: function (response) {                  $(".images_ajax").css('display', 'block');                 $(".images_ajax_sub").append(response[number].img + response[number].text);             }         }),         $(function () {             $('.close_ajax').click(function () {                 $(".images_ajax_sub h1, .images_ajax_sub p, .images_ajax_sub .imembers").remove();                 $(".images_ajax").css('display', 'none');             })         })     } })}); 

if remove image json file 1 undefined image missing not two.

here part of json file

"name": { "img": "<div class=\"imembers\"><img src = \"../images/images/images_of_members/some.jpg\"></div>", "text": "<p>some text</p>" } 

my best guess ajax call gets fired twice. take @ dom nodes click handler being bound to:

$('#members p, #members p span, #main_content span').on('click ...    ^^^^^^^^^^  ^^^^^^^^^^^^^^^ 

since don't prevent event bubbling, click on span triggers bound event handler, bubbles dom , triggers again span's parent node: p. thus, try binding either or.