on click , code executed more than once

Question

for the purpose to give the user the possibility to write in arabic i write the following code html :

<div id="clavier" style="display: none;" title="Clavier arabe">
   <table>
   <tr><td>
  <button value="ر" class="charachter">ر</button>
  <button value="ز" class="charachter">ز</button>
  <button value="ذ" class="charachter">ذ</button>
 <button value="د" class="charachter">د</button>
   <button value="خ" class="charachter">خ</button>
   <button value="ح" class="charachter">ح</button>
   <button value="ج" class="charachter">ج</button>
  <button value="ث" class="charachter">ث</button>
  <button value="ت" class="charachter">ت</button>
  <button value="ب" class="charachter">ب</button>
  <button value="ا" class="charachter">ا</button>
    <button value="mm" class="delete" style="width: 80px;">sup</button> </td></tr>
    <tr><td>
     <button value="ل" class="charachter" style="margin-left: 20px;">ل</button>
   <button value="ك" class="charachter">ك</button>
  <button value="ق" class="charachter" >ق</button>
 <button value="ف" class="charachter">ف</button>
   <button value="غ" class="charachter" >غ</button>
       <button value="ع" class="charachter">ع</button>
          <button value="ظ" class="charachter">ظ</button>
            <button value="ط" class="charachter">ط</button>
          <button value="ض" class="charachter">ض</button>
            <button value="ص" class="charachter">ص</button>
            <button value="ش" class="charachter">ش</button>
            <button value="س" class="charachter">س</button> 

             </td></tr>








  <tr><td>

    <button value="ى" class="charachter" style="margin-left: 40px;">ى</button>
   <button value="ئ" class="charachter">ئ</button>
   <button value="ؤ" class="charachter">ؤ</button>
   <button value="ء" class="charachter"  >ء</button>
   <button value="ة" class="charachter">ة</button>
   <button value="ي" class="charachter">ي</button>
   <button value="و" class="charachter">و</button>
   <button value="ه" class="charachter">ه</button>
   <button value="ن" class="charachter">ن</button>
   <button value="م" class="charachter">م</button>
   <button value="" class="clear">clear</button>

  </td></tr>



   <tr><td>
   <button value="" class="espace" style="height: 25px;width: 220px;margin-left: 60px;">espace</button>
   <button value="إ" class="charachter" >إ</button>
   <button value="أ" class="charachter">أ</button>
   <button value="آ" class="charachter">آ</button>
   <button value="ٱ" class="charachter">ٱ</button>

   </td></tr>
    </table>
    </div>

jquery :

$(".arab").live("click", function() {
    arabInput = $(this);
    $("#clavier").dialog({
        width: '43%'
    });
    $(".charachter").live("click", function() {
        alert($(this).val());
        var string = arabInput.val();
        alert(string + $(this).val());
        arabInput.val(string + $(this).val());
    });
    $(".delete").live("click", function() {
        var string = arabInput.val();
        arabInput.val(string.slice(0, -1));
    });
    $(".espace").live("click", function() {
        var string = arabInput.val();
        arabInput.val(string + " ");
    });
    $(".clear").live("click", function() {
        var string = arabInput.val();
        arabInput.val("");
    });
});​

the problem is that work fine for the first input , but onclick to second input i have the code executed twice and the same character is written twice for the third input it's tree times any idea , why i behaves like this ?

Answer 1

It's occurring the number of times you're clicking it because you are re-registering the event handler each time you click. You need to unbind the event handlers before adding new ones.

Answer 2

as J Torres said, this code works fine the first time. But if you click on the input again, it adds new events to the buttons.

You can simple move the events outside of the $(".arab").click() method like this fiddle or remove the listeners on click like this fiddle.

$(".arab").click(function(){
  arabInput = $(this);
  $("#clavier").show();

});

$(".charachter").click(function()
  { alert($(this).val());
  var string = arabInput.val();
  alert(string+$(this).val());
  arabInput.val(string+$(this).val());
});

$(".delete").click(function()
  { var string = arabInput.val();
  arabInput.val(string.slice(0, -1));
});

$(".espace").click(function()
  { var string = arabInput.val();
  arabInput.val(string+" ");
});

$(".clear").click(function()
  { var string = arabInput.val();
  arabInput.val("");
});

or

$(".arab").live("click", function() {
    arabInput = $(this);
    $("#clavier").show();
    $(".charachter").unbind('click').on("click", function() {
        alert($(this).val());
        var string = arabInput.val();
        alert(string + $(this).val());
        arabInput.val(string + $(this).val());
    });
    $(".delete").unbind('click').on("click", function() {
        var string = arabInput.val();
        arabInput.val(string.slice(0, -1));
    });
    $(".espace").unbind('click').on("click", function() {
        var string = arabInput.val();
        arabInput.val(string + " ");
    });
    $(".clear").unbind('click').on("click", function() {
        var string = arabInput.val();
        arabInput.val("");
    });
});