Question

所以我有一个带有退出按钮的气泡。右边的一个工作正常。左边的那个由于某种原因不能正常工作。

创建气泡的代码

var bubble = "<div class = 'bubble' id='bubble"+driver_id+"' style=top:" + counter * 100 + "px';>"+driver_name+"<br>"+time+"<a id='"+driver_id+"' class='homeDriver'><span class='icon home'></a></span><a id='"+driver_id+"' class='notifyDriver'><span class='icon comments'></a></span><a id='"+driver_id+"' class='pauseDriver'><span class ='icon pause'></a></span><a id='"+driver_id+"' class='show'><span class='icon list'></a></span><div class ='btn-exit'><span class ='icon close'></span></div></div>";

var smsBubble ="<div class = 'smsBubble"+driver_id+"' id ='smsBubble'><span class ='icon notifyComments'></span>"+driver_name+"<input type = 'text' class ='textNotify' id='message'/><div class='buttons'><a id = '"+driver_id+"'><button class='btn-sendSms'>Send</a></button><a id = '"+driver_id+"' class ='sendSms'><button class='btn-sendSmsClose'>Send & Close Card</a></button></div><div class = 'btn-exit'><span class ='icon close'></span></div></div>";

$("#bubble"+driver_id).on('click', '.btn-exit', function(){
    $("#bubble"+driver_id).remove();
 })
$("#smsBubble").on('click', '.btn-exit', function(){
    console.log("Testing");
    $(".smsBubble"+driver_id).remove();

气泡的 CSS

.icon::before
    {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
.close::before
    {
        font-size:20px;
        position: relative;
        right: 10px;
        bottom: 110px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f410";
    }
    .smsClose::before
    {
        font-size: 20px;
        position: relative;
        bottom: 190px;
        right: 10px;
        float: right;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f410";
    }

Answer 1

你的 HTML 字符串真的很难阅读和理解。

考虑使用字符串模板。

您现有的代码（添加了回车）：

var bubble = "<div class = 'bubble' id='bubble"+driver_id+"' style=top:" +
  counter * 100 + "px';>"+driver_name+"<br>"+time+"<a id='"+driver_id+
  "' class='homeDriver'><span class='icon home'></a></span><a id='"+driver_id+
  "' class='notifyDriver'><span class='icon comments'></a></span><a id='"+driver_id+
  "' class='pauseDriver'><span class ='icon pause'></a></span><a id='"+driver_id+
  "' class='show'><span class='icon list'></a></span><div class ='btn-exit'><span class ='icon close'></span></div></div>";

转换为使用字符串模板的相同代码：

var bubble = `
  <div class = "bubble" id="bubble${driver_id}"
    style="top:${counter * 100}px">
    ${driver_name}<br>
    ${time}
    <a id="${driver_id}" class="homeDriver">
      <span class="icon home">
      </a>
    </span>
    <a id="${driver_id}" class="notifyDriver">
      <span class="icon comments">
      </a>
    </span>
    <a id="${driver_id}" class="pauseDriver">
      <span class ="icon pause">
      </a>
    </span>
    <a id="${driver_id}" class="show">
      <span class="icon list">
      </a>
    </span>
    <div class ="btn-exit">
      <span class ="icon close"></span>
    </div>
  </div>`;

应该清楚，第二个版本更容易阅读和查找错误。

请注意，您在多个地方都有这种模式：

<a>
  <span>
  </a>
</span>

那是无效的，你需要在关闭span之前先关闭a：

<a>
  <span></span>
</a>

您还有几个具有相同 ID 的 a 标签：

<a id='"+driver_id+"' class='homeDriver'>

那也是无效的。一个 id 属性只能使用一次。

Answer 2

相信你的smsbubble代码有两个错误，试试：

$("#smsBubble").on('click', '.btn-exit', function(){
    console.log("Testing");
    $("#smsBubble").remove();
})

为什么这些图标之一有效，而另一个无效？

2 个答案: