通知アラートが機能しない

Question

私のウェブサイトの通知アラートを設定する必要があります。私はこの単純なnotification scriptを使用しています。私はこのような私のウェブサイトでそれをテストしている。

<div id="notifications"> 
<div class="alert alert-danger" role="alert"> 
    <a class="button close" style="padding-left: 10px;" href="#">×</a> 
    <i class="fa fa-info-circle "></i> 
    Thanks 
</div> 
</div> 

スタイル

#notifications { 
    cursor: pointer; 
    position: fixed; 
    right: 0; 
    z-index: 9999; 
    bottom: 0; 
    margin-bottom: 22px; 
    margin-right: 15px; 
    max-width: 300px; 
} 

スクリプト

$(document).ready(function() { 
    Notify = function(text, callback, close_callback, style) { 

    var time = '10000'; 
    var $container = $('#notifications'); 
    var icon = '<i class="fa fa-info-circle "></i>'; 

    if (typeof style == 'undefined') style = 'warning' 

    var html = $('<div class="alert alert-' + style + ' hide">' + icon + " " + text + '</div>'); 

    $('<a>',{ 
    text: '×', 
    class: 'button close', 
    style: 'padding-left: 10px;', 
    href: '#', 
    click: function(e){ 
     e.preventDefault() 
     close_callback && close_callback() 
     remove_notice() 
    } 
    }).prependTo(html) 

    $container.prepend(html) 
    html.removeClass('hide').hide().fadeIn('slow') 

    function remove_notice() { 
    html.stop().fadeOut('slow').remove() 
    } 

    var timer = setInterval(remove_notice, time); 

    $(html).hover(function(){ 
    clearInterval(timer); 
    }, function(){ 
    timer = setInterval(remove_notice, time); 
    }); 

    html.on('click', function() { 
    clearInterval(timer) 
    callback && callback() 
    remove_notice() 
    }); 


} 

    }); 

通知があるため、CSSスタイリングで正しく表示されています。しかし、スクリプトは動作していません。通知で閉じるアイコンをクリックすると、終了していません。私はページをリロードするとき、それは（自動クローズも動作していない）にとどまっています何が私のスクリプトで欠けている？

Answer 1

要件は少し難解です。 「通知」は正しく表示されますが、表示されるのは右下隅にx Thanksだけです。しかし、これは通知ではなく、マークアップから来ています。それに関連付けられたイベントはないので、クリックすると何も起こりません。

あなたの主な問題は、Notifyと呼ばれるものを定義しているようですが、それで何もしません。これを解決するには、下記のスニペットをご覧ください。おそらくあなたが望むものではないかもしれませんが、それはもっと近いと思います。

$(document).ready(function() { 
 
    Notify = function(text, callback, close_callback, style) { 
 

 
     var time = '10000'; 
 
     var $container = $('#notifications'); 
 
     var icon = '<i class="fa fa-info-circle "></i>'; 
 

 
     if (typeof style == 'undefined') style = 'warning'; 
 

 
     var html = $('<div class="alert alert-' + style + ' hide">' + icon + " " + text + '</div>'); 
 

 
     $('<a>', { 
 
      text: '×', 
 
      class: 'button close', 
 
      style: 'padding-left: 10px;', 
 
      href: '#', 
 
      click: function(e) { 
 
       e.preventDefault(); 
 
       e.stopPropagation(); 
 
       close_callback(); 
 
       remove_notice(); 
 
      } 
 
     }).prependTo(html); 
 

 
     $container.prepend(html); 
 
     html.removeClass('hide').hide().fadeIn('slow'); 
 

 
     function remove_notice() { 
 
      // html.stop().fadeOut('slow').remove() 
 
      html.fadeOut('slow', function() { 
 
       $(this).remove(); 
 
      }); 
 
     } 
 

 
     var timer = setInterval(remove_notice, time); 
 

 
     $(html).hover(function() { 
 
      setMessage('You hovered over me.'); 
 
      clearInterval(timer); 
 
     }, function(){ 
 
      if (parseInt(html.css('opacity')) === 1) { 
 
       // element is not currently being faded out 
 
       setMessage('You stopped hovering over me.'); 
 
       timer = setInterval(remove_notice, time); 
 
      } 
 
     }); 
 

 
     html.on('click', function() { 
 
      clearInterval(timer); 
 
      callback && callback(); 
 
      remove_notice(); 
 
     }); 
 
    } 
 

 
    var notification = new Notify('This is a notification.', function() { 
 
     setMessage('You clicked my text.'); 
 
    }, function() { 
 
     setMessage('You clicked my "x".'); 
 
    }); 
 

 
}); 
 

 
function setMessage(messageText) { 
 
    $('#testMessage').text(messageText); 
 
}

#notifications { 
 
    cursor: pointer; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 9999; 
 
    bottom: 0; 
 
    margin-bottom: 22px; 
 
    margin-right: 15px; 
 
    max-width: 300px; 
 
} 
 

 
#testMessage { 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 9999; 
 
    top: 0; 
 
    margin-top: 22px; 
 
    margin-right: 15px; 
 
    max-width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script> 
 

 
<div id="testMessage"></div> 
 
<div id="notifications"> 
 
<!--  <div class="alert alert-danger" role="alert"> 
 
     <a class="button close" style="padding-left: 10px;" href="#">×</a> 
 
     <i class="fa fa-info-circle "></i> 
 
     Thanks 
 
    </div> --> 
 
</div>