How can I get the span tag value which has the same class name and Created dynamically using Jquery?

Question

I want to get the span tag text which I created dynamically at runtime.

My task is I want to get the file path name

 $(document).on('click', '.MainFolder', function () { // Your Code var $self = $(this); var parentPath = $(this).children('.pathValue').text(); alert('childrent = ' + $(this).children('.pathValue').text()); $('.SubFolder').css("background", "none"); $('#ContentPlaceHolder1_txtPath_I').val(parentPath); $.ajax({ type: "POST", contentType: "application/json;charset=utf-8", url: "adminCopyCrystalReport.aspx/getDirectoryNames", data: JSON.stringify({ "dirLocation": $(this).children('.pathValue').text() }), dataType: "json", success: function (data) { alert('Success = '+data.d); for (var i = 0; i < data.d.length; i++) { $('<div class="MainFolder"><span class="glyphicon glyphicon-folder-close folder-icon"></span>' + data.d[i] + '<span style="visibility: visible;" class="pathValue">' + parentPath + data.d[i] + '/</span></div>').appendTo($self); } //$self = ""; //parentPath = ""; }, error: function (result) { alert("Error"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br> <span style="visibility: visible;" class="pathValue">~/MyDocuments/Folder1/</span> </div> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br> <span style="visibility: visible;" class="pathValue">~/MyDocuments/Folder2/</span> </div> 

On page load it will show the result like belo

Folder1

~/MyDocuments/Folder1/             //File Path                              

Folder2

~/MyDocuments/Folder2/                

When User click on Folder1 , I will call ajax and pass the corresponding url and it will get the subfolder name

Folder1

~/MyDocuments/Folder1/             //File Path     

    SubFolder1
    ~/MyDocuments/Folder1/SubFolder1   
    SubFolder2
    ~/MyDocuments/Folder1/SubFolder1
    SubFolder3                      
    ~/MyDocuments/Folder1/SubFolder1   

Folder2

~/MyDocuments/Folder2/    

Until this, it is working fine.

When I select SubFolder1 or SubFolder2 or SubFolder3 , that click function is calling two times, And giving the same file name like below

Folder1
    SubFolder1
    SubFolder2
    SubFolder3                      
    SubFolder1
    SubFolder2
    SubFolder3                      

Folder2

Update

When I click on SubFolder1 , on my alert it is printing like below

First alert: childrent = ~/MyDocuments/Folder1/SubFolder1/

Second alert: childrent = ~/MyDocuments/Folder1/

and then It is calling ajax url and calling two times with those two url's. But my first url is correct . I don't want to get the second url.

Answer 1

To show the difference clearly, the area that can be clicked set as a red square.

This is a simple demo showing why AJAX triggered multi times.

 var fakeSubFolder = '<div class="MainFolder"><span class="glyphicon glyphicon-folder-close folder-icon"></span><span style="visibility: visible;" class="pathValue">' + 'SubFolder' + '/</span></div>' $(document).on('click', '.MainFolder', function() { var $self = $(this) $(fakeSubFolder).appendTo($self); }); 

 .MainFolder{ outline: 1px red solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br> <span style="visibility: visible;" class="pathValue">~/MyDocuments/Folder1/</span> </div> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br> <span style="visibility: visible;" class="pathValue">~/MyDocuments/Folder2/</span> </div> 

And here's a demo showing how to overcome.

 var fakeSubFolder = '<div class="MainFolder"><span class="glyphicon glyphicon-folder-close folder-icon"></span><span style="visibility: visible;" class="pathValue">' + 'SubFolder' + '/</span></div>' $('body').on('click', '.pathValue', function() { var $self = $(this) var $parent = $self.parent() $(fakeSubFolder).appendTo($parent); }); 

 .pathValue{ outline: 1px red solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br> <span style="visibility: visible;" class="pathValue">~/MyDocuments/Folder1/</span> </div> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br> <span style="visibility: visible;" class="pathValue">~/MyDocuments/Folder2/</span> </div>