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时，该点击功能会调用两次，并提供相同的文件名，如下所示

Folder1
    SubFolder1
    SubFolder2
    SubFolder3                      
    SubFolder1
    SubFolder2
    SubFolder3                      

Folder2

更新

当我点击SubFolder1时，在我的提醒中它会打印如下

第一次提醒：childrent =〜/ MyDocuments / Folder1 / SubFolder1 /

第二次提醒：childrent =〜/ MyDocuments / Folder1 /

然后它调用ajax url并用这两个url调用两次。 但我的第一个网址是正确的。我不想得到第二个网址。

Answer 1

为了清楚地显示差异，可以点击的区域设置为红色方块。

这是一个简单的演示，展示了AJAX多次触发的原因。

＆＃13;

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);
});

＆＃13;

.MainFolder{
  outline: 1px red solid;
}

＆＃13;

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

＆＃13;

这是一个演示如何克服的演示。

＆＃13;

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);
});

＆＃13;

.pathValue{
  outline: 1px red solid;
}

＆＃13;

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

＆＃13;

如何获取具有相同类名并使用Jquery动态创建的span标记值？

1 个答案: