CODEWITHSUNDEEP
jqueryhtmlclick
fatiDev
fatiDev

Reputation: 5992

on click , code executed more than once

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 ?

Upvotes: 1

Views: 243

Answers (2)

VVV
VVV

Reputation: 7593

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("");
    });
});

Upvotes: 3

Jaime Torres
Jaime Torres

Reputation: 10515

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.

Upvotes: 4

Related Questions