如何獲取具有相同類名且使用Jquery動態創建的span標記值？

Question

我想獲取我在運行時動態創建的span標簽文本。

我的任務是我要獲取文件路徑名

 $(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> 

在頁面加載時，它將顯示類似belo的結果

Folder1

~/MyDocuments/Folder1/             //File Path                              

Folder2

~/MyDocuments/Folder2/                

當用戶單擊Folder1時 ，我將調用ajax並傳遞相應的url，它將獲得子文件夾名稱

Folder1

~/MyDocuments/Folder1/             //File Path     

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

Folder2

~/MyDocuments/Folder2/    

在此之前，它工作正常。

當我選擇SubFolder1或SubFolder2或SubFolder3 ，該click函數被調用兩次，並給出如下相同的文件名

Folder1
    SubFolder1
    SubFolder2
    SubFolder3                      
    SubFolder1
    SubFolder2
    SubFolder3                      

Folder2

更新資料

當我單擊SubFolder1 ，在我的警報下，它的打印如下

第一個警報：childrent =〜/ MyDocuments / Folder1 / SubFolder1 /

第二次警報：childrent =〜/ MyDocuments / Folder1 /

然后它調用ajax url，並用這兩個url調用兩次。 但是我的第一個網址是正確的 。 我不想獲取第二個URL。

Answer 1

為了清楚顯示差異，可以單擊的區域設置為紅色正方形。

這是一個簡單的演示，顯示了為什么AJAX多次觸發。

 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> 

這是演示如何克服的演示。

 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>