Question

我有文件的集合以及屏幕上显示的pdf上传的相应标题。用户可以删除此列表。删除所选文件后，应该刷新文件列表而不重新加载页面。我能够成功执行ajax请求并删除文件，服务器返回成功删除的文件列表作为json stirng。我的问题是，我无法看到jQuery为动态生成的div元素选择并删除它们（特别是带有'id：id_name'的div）。我得到'未定义'的ID。有人可以建议吗？

我动态生成的文件内容及其标题：

 $.ajax({
  url: 'http://localhost/webservice/showlist.php',
  success: function(data){
      $.each(data, function(i, element){
          // display 'filename' and corresponding 'title'.
          var id_name = element['filename'];
          var id_title = element['title'];

          $('<div/>', {
              id: id_name
          })
          .append('<input type="checkbox" name="checkvalue[]"  disabled="disabled" class="check_box"'+id_name+'" value='+element['filename']+' >')
          .append('<div>' + id_name +'</div>')
          .append('<div class="clss_'+id_name+'">' + id_title +  '</div>')
          .appendTo(mainDiv);

        });
   }

这是按下“删除”按钮时执行的代码的一部分：

  $.ajax({
            url: 'http://localhost/webservice/delete_pdf.php',
            data: {delete_array: jsonString},
            dataType: 'json',
            type: 'POST',
            success: function(data){
                // Retrieve the success_delete array from json response.
                var toDelete_Array = data.success_delete;
                // Remove the filenames from the displayed list.
                //iterate through the success_delete array
               $.each(toDelete_Array,function(i, file_name){
                   // The id of each wrapper_div member is equal to corresponding filename
                   var x = $('#'+file_name).attr('id');
                   console.log('id for div: '+ x); <---- this returns 'undefined'

            // I have tried $('#'+file_name).remove(); and nothing happens. I am guessing it is due to the 'undefined' id of the div that i am trying to delete.
                });

                    },
            error: function(jqXHR, stringMessage, string){
                        alert(stringMessage);
                    }
                });
    }

Answer 1

我无法通过查看代码为什么未定义来告诉您，但按照定义元素$('#' + file_name)的ID必须正是值file_name，即：

var x = file_name;

如果之后仍然未定义，那么您的$.each来电不正确。

Answer 2

我的file_names里面有一个句点，这破坏了jQuery选择器操作。 jQuery选择器的周期是有问题的，因为它们用于表示类。为了解决这个问题，我使用以下函数（取自here）转义它和其他不需要的字符：

 $(clean_id(file_name)).fadeOut(2000,function(){
                       $(clean_id(file_name)).remove();
                   });

 function clean_id(my_id){
                       return "#" + my_id.replace( /(:|\.|\[|\]|,)/g, "\\$1" );
                   }

为什么我为div元素动态生成的id为'undefined'？

2 个答案: