Jquery notification event firing twice

Question

I have just started using gritter notification plugin and experiencing strange behavior. I am displaying the notification on page load and for some reason, the same message is appearing twice. I would be grateful if someone could check my code and highlight any errors that I have overlooked. The link for the plugin is: http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/. Many thanks.

UPDATED HTML FROM FIREBUG

<div id="gritter-notice-wrapper">

    <div id="gritter-item-2" class="gritter-item-wrapper" role="alert" style="">
        <div class="gritter-top"></div>
        <div class="gritter-item">
            <a class="gritter-close" tabindex="1" href="#" style="display: none;">

                Close Notification

            </a>
            <div class="gritter-without-image">
                <span class="gritter-title">

                    New Message

                </span>
                <p>

                    You have  

                    <span class="yourstyle">

                        1

                    </span>

                     new message(s). Please go to the message area in …

                </p>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="gritter-bottom"></div>
    </div>


    <div id="gritter-item-3" class="gritter-item-wrapper" role="alert" style="">
        <div class="gritter-top"></div>
        <div class="gritter-item">
            <a class="gritter-close" tabindex="1" href="#">

                Close Notification

            </a>
            <div class="gritter-without-image">
                <span class="gritter-title">

                    New Message

                </span>
                <p>

                    You have  

                    <span class="yourstyle">

                        1

                    </span>

                     new message(s). Please go to the message area in …

                </p>
            </div>
        </div>
        <div class="gritter-bottom"></div>
    </div>

</div>  


<div id="messages" style="float: left;height: 220px">
     <div>
       Messages
     </div>
     <div style="overflow: hidden;">
        <div id="message"style="font-size: 11px; padding: 10px 10px;" >

            <?php

                mysql_select_db($database_domain, $domain); 
                $query1 = "SELECT * FROM messages WHERE to_user = '$_SESSION[kt_name_usr]' AND `read` = 1"; 
                $result1 = mysql_query($query1) or die(mysql_error());
                $totalRows1 = mysql_num_rows($result1);
                if (mysql_num_rows($result1) ==0) {
                $error1 = true;
                $message3 = "You have no new messages.";
                } else {
                // There was a result
                // now check if there were any records.
                    if (mysql_num_rows($result1) >0) {    
                        $error1 = false;
                        $messages1 = "You have" . "  " . "<span class='yourstyle'>" . $totalRows1 . "</span>" . " " . "new message(s). Please go to the message area in your control panel."; 
                  }
                 } 

                 if($error1 == 0)  {

                    echo "You have" . "  " . "<span class='yourstyle'>" . $totalRows1 . "</span>" . " " . "new message(s). Please go to the message area in your control panel.";

                    echo "<SCRIPT type=text/javascript>\n";
                    echo "$(function() {\n";
                    echo "$(\"#testid\" ).show()\n";
                    echo "$.gritter.add({title: 'This is a notice', text: \"".$messages1."\"})\n";
                    echo "});\n";
                    echo "</script>\n";

                } else { 

                    echo 'There are no new system or site messages to display.';

                }

             ?>

            </div>

           </div>

          </div>

          <div id="testid" style="display:none;"></div>

SOLUTION:

<script type="text/javascript">
       $(function () {
            var newmsg = <?php echo json_encode($messages1) ?>;
            $.gritter.add({title: 'New Message', text: newmsg, time: 4000, sticky: false});
    });
</script>

Answer 1

Just comment out this line,

echo "You have" . "  " . "<span class='yourstyle'>" . $totalRows1 . "</span>" . " " . "new message(s). Please go to the message area in your control panel.";

Answer 2

I have the same issue resolved by stopImmediatePropagation()

try to use following code

    <script type="text/javascript">
       $(function (event) {
            event.stopImmediatePropagation();
            var newmsg = <?php echo json_encode($messages1) ?>;
            $.gritter.add({title: 'New Message', text: newmsg, time: 4000, sticky: false});
    });
</script>