[英]javascript doesn't work to display alert
I have an html element and i want to display an alert when i click on the "i" element. 我有一个html元素,我想在单击“ i”元素时显示警报。 When the div with the class "innerNotif" is put directly on the DOM it works but when i add the div with the socket.on it doesn't work.
当将具有“ innerNotif”类的div直接放在DOM上时,它可以工作,但是当我使用socket.on添加div时,则不起作用。 I think it s because the element is not in the DOM when it's load.
我认为这是因为元素在加载时不在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>
The new line characters are breaking the string you want to append. 新行字符破坏了您要附加的字符串。
This should work: 这应该工作:
$( "#notifBar" ).append( '<div class="innerNotif" id="id' + notifId + '"><i class="fa fa-times" on-click="removeNotif" aria-hidden="true"></i></div>');
Try this code which I was edited. 试试这个我编辑过的代码。
<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>
I finnaly find a solution by adding a onclick function of a parent element and add a addEventListener on it 我最终找到了一个解决方案,方法是添加父元素的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.