dynamic buttons fire off 2 times, why?
<p>Here's my code that creates dynamic buttons that are supposed to fire off <strong><code>$('#emailRemoveBtn').live('click', function()</code></strong> once clicked. The problem is, it always fires it two times. Say, I click on the button once, but this function executes twice. </p>

<p>Any ideas what might be wrong with it?</p>

<pre><code>&lt;script&gt;

var tb1 = '&lt;tr &gt;&lt;td width="27" align="left"&gt;&lt;img src="icon_mail.png" width="24" height="24"&gt;&lt;/td&gt;&lt;td width="228" align="left"&gt;';
var tb2 = '&lt;/td&gt;&lt;td align="right"&gt;&lt;a href="#" id="emailRemoveBtn" data-rembtn="';
var tb3 ='" class="ui-state-default ui-corner-all"&gt;&lt;span class="ui-icon ui-icon-close"&gt;&lt;/span&gt;remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';

var emailArray = new Array();

  $('#emailRemoveBtn').live('click', function() {  /// WHY DOES THIS EVENT FIRE OFF 2 TIMES?

    alert( $(this).data('rembtn') );
    //emailArray.splice( $(this).data('rembtn'), 1 );

    //var tbl = "";
    //for(var i=0;i&lt;emailArray.length;i++)
    //{
    //  tbl = tbl + tb1 + emailArray[i] + tb2 + i + tb3 ;   /// "i" is dynamic identifier for "data-rembtn"
    //}

    //$('#emailList').html(tbl);    

  });

$('#addEmail').click(function()
  { 
        var tbl = "";
        if ( $("#inputEmail").val()  != "" )
        {       

                var newadd = true;

                for(var i=0;i&lt;emailArray.length;i++)
                    {
                        if ( emailArray[i] == $("#inputEmail").val() ) { var newadd = false; }
                    }

                if ( newadd ) { emailArray.push( $("#inputEmail").val() ); } else { alert("no!"); }

                for(var i=0;i&lt;emailArray.length;i++)
                    {
                        tbl = tbl + tb1 + emailArray[i] + tb2 + i + tb3 ;   /// "i" is dynamic identifier for "data-rembtn"
                    }


                $('#emailList').html(tbl);      

        }
  });  

&lt;/script&gt;
</code></pre>
