Why is this alert being fired three times instead of once
<p>In this jsBin file an alert (which just displays 'fired') is called three times.</p>

<p>It should be just called once since its just added to : </p>

<pre><code>.data( "autocomplete" )._renderItem = function( ul, item ) {
</code></pre>

<p>Here is the bin file : 
<a href="http://jsbin.com/welcome/55641/edit" rel="nofollow">http://jsbin.com/welcome/55641/edit</a></p>

<p>How can the code be amended so that the alert is just fired once ?</p>

<p>The entire code : </p>

<pre><code>&lt;!doctype html&gt;

&lt;html lang="en"&gt;
&lt;head&gt;

 &lt;style type="text/css"&gt;
        fieldset {width: 60%; margin: 0 auto;}
        div.row {clear: both;}
        div.row label {float: left; width: 60%;}
        div.row span {float: right; width: 35%;}
    &lt;/style&gt;


    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;jQuery UI Autocomplete - Custom data and display&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;

    &lt;style&gt;
    #project-label {
        display: block;
        font-weight: bold;
        margin-bottom: 1em;
    }
    #project-icon {
        float: left;
        height: 32px;
        width: 32px;
    }
    #project-description {
        margin: 0;
        padding: 0;
    }
    &lt;/style&gt;

    &lt;script&gt;
    $(function() {
        var projects = [
            {
                value: "jquery",
                label: "jQuery",
                desc: "the write less, do more, JavaScript library",
                icon: "jquery_32x32.png"
            },
            {
                value: "jquery-ui",
                label: "jQuery UI",
                desc: "the official user interface library for jQuery",
                icon: "jqueryui_32x32.png"
            },
            {
                value: "sizzlejs",
                label: "Sizzle JS",
                desc: "a pure-JavaScript CSS selector engine",
                icon: "sizzlejs_32x32.png"
            }
        ];

        $( "#project" ).autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.desc );
                $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            alert('fired');
            return $("#suggestionsDiv").append("&lt;div class='row'&gt; &lt;label for='first-field'&gt;The first field&lt;/label&gt;&lt;span&gt;&lt;input type=text id='first-field' size='15' /&gt;&lt;/span&gt;&lt;/div&gt;");
        };

    });



    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="project-label"&gt;Select a project (type "j" for a start):&lt;/div&gt;
&lt;img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" /&gt;
&lt;input id="project" /&gt;
&lt;input type="hidden" id="project-id" /&gt;
&lt;p id="project-description"&gt;&lt;/p&gt;



  &lt;fieldset&gt;

            &lt;legend&gt;Suggestions&lt;/legend&gt;

  &lt;div id ="suggestionsDiv"&gt;
            &lt;div class="row"&gt;
                &lt;label for="first-field"&gt;The first field&lt;/label&gt;
                &lt;span&gt;&lt;input type="text" id="first-field" size="15" /&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
                &lt;label for="second-field"&gt;The second field with a longer label&lt;/label&gt;
                &lt;span&gt;&lt;input type="text" id="second-field" size="10" /&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
                &lt;label for="third-field"&gt;The third field&lt;/label&gt;
                &lt;span&gt;&lt;input type="text" id="third-field" size="5" /&gt;&lt;/span&gt;
            &lt;/div&gt;
   &lt;/div&gt;
  &lt;/fieldset&gt;

&lt;/body&gt;
&lt;/html&gt;
​
</code></pre>
