javascript 无法显示警报答案

【问题标题】：javascript doesn't work to display alertjavascript 无法显示警报
【发布时间】：2017-08-31 12:31:53
【问题描述】：

我有一个 html 元素，我想在单击“i”元素时显示警报。当具有“innerNotif”类的 div 直接放在 DOM 上时，它可以工作，但是当我使用 socket.on 添加 div 时，它不起作用。我认为这是因为加载时元素不在 DOM 中。

<span class="disNone notificationMenuCss" id="notifBar">
   <div class="innerNotif" id="idNatif">1<i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>
</span>

<script>
var socket = io.connect();
var notifId = 0;

socket.on('libCourtLotChangeServ', function(){
        var numItems = $('.innerNotif').length +1;

    $( "#notifBar" ).append( '<div class="innerNotif" id="id' + notifId +'"><i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>');
    notifId++;
    $("#notificationNumber").html(numItems);
});
</script>

<script>
    Polymer({
        alertNotif: function() {
            alert('Test');
        }
    });
</script>

【问题讨论】：

你可能缺少append的右括号
括号的结尾在
元素之后，就在 notifId++ 之前

@alexzerah </i> 和 </div>'); 需要在同一行。您不能在字符串中拆分行

您是否因为使用polymer而忘记注册您的元素？

@Ofisora 我必须注册什么元素？

标签： javascript jquery dom socket.io polymer

【解决方案1】：

换行符破坏了您要附加的字符串。

这应该可行：

$( "#notifBar" ).append( '<div class="innerNotif" id="id' + notifId + '"><i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>');

【讨论】：

【解决方案2】：

试试我编辑的这段代码。

<span class="disNone notificationMenuCss" id="notifBar">
   <div class="innerNotif" id="idNatif">1<i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>
</span>

<script>
var socket = io.connect();
var notifId = 0;

socket.on('libCourtLotChangeServ', function(){
        var numItems = $('.innerNotif').length +1;

    $( "#notifBar" ).append( '<div class="innerNotif" id="id' + notifId + '"><i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>');
    notifId++;
    $("#notificationNumber").html(numItems);
});
</script>

<script>
    Polymer({
        alertNotif: function() {
            alert('Test');
        }
    });
</script>

【讨论】：

我进行了更改，但仍然无法正常工作，我不明白为什么
可能是 io 对象或聚合物函数显示的错误。其他方面，脚本中的所有代码都运行良好。可能是套接字连接错误。
谢谢，我看看是不是聚合物问题

【解决方案3】：

我最终通过添加父元素的onclick函数并在其上添加addEventListener找到了解决方案

<paper-toolbar class="header" on-click="removeNotif">
    <div class="notification" on-click="notificationMenu">
        <span class="notificationSpan" id="notificationNumber"></span>
        <span class="disNone notificationMenuCss" id="notifBar"></span>
    </div>
</paper-toolbar>

<script type="text/javascript">
var socket = io.connect();
var notifId = 0;

socket.on('libCourtLotChangeServ', function(contrat){
    var numItems = $('.innerNotif').length +1;
    $( "#notifBar" ).append( '<div class="innerNotif" id="id' + notifId +'" style="width: 96%; height: 30px; text-align: left; border: 1px solid black; background-color: white; padding: 3px;">' + 'Le contrat <br>' + contrat + ' a été modifié ' + '<i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>');
    notifId++;
    $("#notificationNumber").html(numItems);
});
</script>

<script>
 Polymer({
     removeNotif: function() {
         var idValue = Number(($(".innerNotif:last").attr("id")).replace("id", "0")); 
         console.log(idValue);
         for (var numItemsCheck = 0; numItemsCheck <= idValue; numItemsCheck++){ 
             document.querySelector("#id" + numItemsCheck).addEventListener("click", function(){
                 var numItems = $('.innerNotif').length -1;
                 $("#notificationNumber").html(numItems);
                 this.remove();
              })
          }
      }
  });
  </script>

【讨论】：