Question

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

Any ideas what might be wrong with it?

<script>

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

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<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<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<emailArray.length;i++)
                    {
                        tbl = tbl + tb1 + emailArray[i] + tb2 + i + tb3 ;   /// "i" is dynamic identifier for "data-rembtn"
                    }


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

        }
  });  

</script>

Answer 1

I can’t see why it’s running twice looking at that code, but it feels like it’s being bound to the click event twice somehow.

This is worth trying to see if it only fires once, and if this helps hunt around for another instance of ‘click’ being bound.

$('#emailRemoveBtn').unbind('click').die().live('click', function() { doStuff(); }