Question

我有一个用javascript动态填充的表格。在服务列下，有一个链接（铅笔图标），用于在屏幕底部显示聊天框。有一些标签用于识别该人正在聊天的对象。

问题：偶尔，当我点击聊天链接时，显示的标签的标题是“未定义”而不是人员编号。

我正在检索这样的人数：

$("tbody").on("click", "a.chat-link",function (e){
      e.preventDefault();
      // Get the link
      var link = $(e.target).parent().closest('a');
      var personCode = link.attr('person-code');

      $(".chat-wrapper").removeClass("closed");
      // hide other tabs
      $("#chat .tabs .list-wrapper .list .scroll-container div").removeClass("current");
      $("#content div.messages-container div.messages").hide();
      $("#content div.messages-container .messages div.message").hide();
      // add new tab and related content
      if ($(".scroll-container div[data-id="+personCode+"]").length === 0) {
        //console.log('new tab');
        $("#chat .tabs .list-wrapper .list .scroll-container").append("<div class='current tab' data-id ='" + personCode + "'><a class='button' title='" + personCode + "' href='#'>" +
                " <span class='name'>" + personCode + "</span><span class='remove'>x</span></a></div>");
        $("#content div.messages-container").append("<div data-id='" + personCode + "_content' class='messages active'></div>");
      }
      // set the newly added tab as current
      $("div[data-id="+personCode+"]").addClass(personCode === 'Admin' ? "current admin" : "current");

      $("div[data-id="+personCode+"_content]").show();
      $("div[data-id="+personCode+"_content]" + " div.message").show();
      $("#content").removeClass("collapse").removeAttr("aria-expanded style");
      //toggle collapse icon
      $('#content-toggle').find('span').removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down");
    });

Answer 1

解决方案：

通过删除<a>链接的现有填充并添加：

来编辑css文件

.status{padding-left: 8px; display: inline-block;}

在图标旁边的单独<div class='status'>中使用新规则。这消除了图标周围的死空间，导致了无标题的图标。单击时显示的标签。

点击事件未找到属性

1 个答案: