无法在<a> tag

时间：2017-11-17 14:51:26

标签： javascript jquery html css

i want to append this new element

<a data-toggle="tab"> <span class = "hyperspan"> </span> </a>

but, <span class="hyperspan"></span> does not appear on the console after the append. it makes me not able to select element through button, must click text (element ).

Try Fill in the input form and submit in My JSFiddle内附加，然后点击第二个按钮。

如果 text 未单击，

按钮将无效。

代码段示范：

＆＃13;
＆＃13; 
$('.submitButton').click(function () {
		var add = '<li>' +
      '<div class="zf-folder">' +
        '<div id="tabFolder3" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">' +
          '<div class="_sideFolder"></div>' +
          '<div class="_iconText" style="width: 215px">' +
            '<div class="ellipsis">' +
              '<div class="_iconFolder">' +
                '<div class="_icon-col">' +
                '</div>' +
              '</div>' +
              
              '<a data-toggle="tab"><span class="hyperspan"></span></a>' +
            
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>' +
    '</li>';
    
    if( document.getElementById("addNew").value === '' ){
            alert("WRITE SOMETHING");
        } else {
        		$('.nav').append(add)
						var inputan = document.getElementById("addNew").value;
            $('li:last').find('a').text(inputan);
            document.getElementById("newFoldr").value = "";
            }
});
＆＃13; 
._sideFolder {
  background-color: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}

.zf-folder:active ._sideFolder,
li.active .zf-folder ._sideFolder {
  background-color: blue;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}

.zf-folder a {
  color: white;
  text-decoration: none;
}

._tabFolder {
  background: red;
  cursor: pointer;
  position: relative;
}

._tabFolder:hover {
  background-color: grey
}

._tabFolder:active,
li.active ._tabFolder {
  background-color: rgba(29, 33, 41, 1)
}

._itemPosition {
  align-items: center;
  display: flex
}

._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
  display: block
}

._iconText {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-left: 13px;
}

._iconFolder,
._1i5x,
._1i5w {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle
}

._5bme ._iconFolder {
  background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -412px -21px
}

.hyperspan {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<input type="text" id="addNew" placeholder="Write something">
<input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 5px;">

<ul class="nav">

  <li class="active">
    <div class="zf-folder">
      <div id="tabFolder" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">
        <div class="_sideFolder"></div>
        <div class="_iconText" style="width: 215px">
          <div class="ellipsis">
            <div class="_iconFolder">
              <div class="_icon-col">
              </div>
            </div>
            
            <a href="#mainFolder" aria-controls="mainFolder" data-toggle="tab">Main Folder<span class="hyperspan"></span></a>
            
          </div>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="zf-folder">
      <div id="tabFolder2" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">
        <div class="_sideFolder"></div>
        <div class="_iconText" style="width: 215px">
          <div class="ellipsis">
            <div class="_iconFolder">
              <div class="_icon-col">
              </div>
            </div>

            <a href="#secondFolder" aria-controls="secondFolder" data-toggle="tab">Second Folder<span class="hyperspan"></span></a>

          </div>
        </div>
      </div>
    </div>
  </li>

</ul>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

如果您需要以下范围，则可以使用html()代替text()。

$('li:last').find('a').html(inputan+'<span class="hyperspan"></span>');

答案 1 :(得分：0)

问题是，当您这样做时，您将覆盖a元素的内容：

$('li:last').find('a').text(inputan);

您可以将文本放在span元素之前，如下所示：

$('li:last').find('span').before(inputan);

＆＃13;
＆＃13; 
$('.submitButton').click(function () {
		var add = '<li>' +
      '<div class="zf-folder">' +
        '<div id="tabFolder3" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">' +
          '<div class="_sideFolder"></div>' +
          '<div class="_iconText" style="width: 215px">' +
            '<div class="ellipsis">' +
              '<div class="_iconFolder">' +
                '<div class="_icon-col">' +
                '</div>' +
              '</div>' +
              
              '<a data-toggle="tab"><span class="hyperspan"></span></a>' +
            
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>' +
    '</li>';
    
    if( document.getElementById("addNew").value === '' ){
            alert("WRITE SOMETHING");
        } else {
        		$('.nav').append(add)
						var inputan = document.getElementById("addNew").value;
            $('li:last').find('span').before(inputan);
            document.getElementById("newFoldr").value = "";
            }
});
＆＃13; 
._sideFolder {
  background-color: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}

.zf-folder:active ._sideFolder,
li.active .zf-folder ._sideFolder {
  background-color: blue;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}

.zf-folder a {
  color: white;
  text-decoration: none;
}

._tabFolder {
  background: red;
  cursor: pointer;
  position: relative;
}

._tabFolder:hover {
  background-color: grey
}

._tabFolder:active,
li.active ._tabFolder {
  background-color: rgba(29, 33, 41, 1)
}

._itemPosition {
  align-items: center;
  display: flex
}

._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
  display: block
}

._iconText {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-left: 13px;
}

._iconFolder,
._1i5x,
._1i5w {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle
}

._5bme ._iconFolder {
  background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -412px -21px
}

.hyperspan {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
＆＃13; 
<input type="text" id="addNew" placeholder="Write something">
<input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 5px;">

<ul class="nav">

  <li class="active">
    <div class="zf-folder">
      <div id="tabFolder" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">
        <div class="_sideFolder"></div>
        <div class="_iconText" style="width: 215px">
          <div class="ellipsis">
            <div class="_iconFolder">
              <div class="_icon-col">
              </div>
            </div>
            
            <a href="#mainFolder" aria-controls="mainFolder" data-toggle="tab">Main Folder<span class="hyperspan"></span></a>
            
          </div>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="zf-folder">
      <div id="tabFolder2" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">
        <div class="_sideFolder"></div>
        <div class="_iconText" style="width: 215px">
          <div class="ellipsis">
            <div class="_iconFolder">
              <div class="_icon-col">
              </div>
            </div>
            <a href="#secondFolder" aria-controls="secondFolder" data-toggle="tab">Second Folder<span class="hyperspan"></span></a>
          </div>
        </div>
      </div>
    </div>
  </li>

</ul>
＆＃13;
＆＃13;
＆＃13;

这里有JSFiddle：https://jsfiddle.net/qb8b4hcj/35/

相关问题
最新问题