How do i prevent a function being run more than once on a jquery .live event
<p>Ok i am reediting my post as i  think it could be more clear.</p>

<p>I have a ASP.net page with a gridview etc on.</p>

<p>On the result rows of the gridview is an image that when clicked opens up a modal popup window (basically a hidden div that is shown on click).</p>

<p>That modal, as it appears is populated dynamically by some ajax/json with a 2 column table, column 1 just text rows, column 2 combination of empty dropdown lists and check boxes.(these are all added to the DOM AFTER the main page load).</p>

<p>I am trying to populate the checklists with their available  via ajax/json when they are clicked by the user, and i only want this to happen on the first click only and no matter how many times the user clicks on that dropdown there after (even after going out of focus and back) i don't want to see more repeats of the same  appear.</p>

<p>Here is the code that currently works when the dropdown is clicked, that is the dropdown is populated. Te problem is if i loose focus and then re-click the dropdown, it gets repopulated with a duplicate list of :</p>

<pre><code>&lt;code&gt; 
    $('#FSSiteName').live('focus', function () {
        var $this = $(this);
        getFSSites();
        //i thought the below line would stop it happening again when i click on the dropdown
    $this.unbind('focus');
});

 function getFSSites() {
            var ddSites = $("#FSSiteName");
            $.ajax({
                type: "POST",
                url: "Circuits_OrderManagementTracker.aspx/getTheSitesList",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var FSSitesReturned = xml.find("Table");

                    $.each(FSSitesReturned, function (index, FSSitesReturned) {
                        dbname = $(this).find("SiteNames").text()
                        ddSites.append('&lt;option&gt;' + dbname + '&lt;/option&gt;');
                    });
                },
                failure: function (msg) {
                    alert(msg);
                }
            });
        }
&lt;/code&gt;
</code></pre>

<p>I have changed to the code below on suggestions by your good selves, but when i do the below my dropdown list no longer gets populated and i also tried .one() which ad the same effect.</p>

<pre><code>&lt;code&gt;
         $('#FSSiteName').on('click', function () {
            var $this = $(this);
            //run your alert here if it´s necessary
            //alert('Focused for the first time :)');
            getFSSites();
            //unbind the event to prevent it from being triggered again
            $this.off('click');
         });
&lt;/code&gt;
</code></pre>

<p>Hope this is a bit clearer to anyone wishing to help.</p>
