Question

为了给用户提供用阿拉伯语写的可能性，我编写了以下代码 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("");
    });
});

问题是第一次输入工作正常，但是点击第二次输入我执行了两次代码并且相同的字符被写入两次对于第三个输入，它是树时间任何想法，为什么我这样做？

Answer 1

您正在点击它的次数，因为您每次单击时都会重新注册事件处理程序。在添加新事件之前，您需要取消绑定事件处理程序。

Answer 2

正如J Torres所说，这段代码第一次正常工作。但是，如果再次单击输入，它会向按钮添加新事件。

您可以简单地将事件移到$（“。arab”）。click（）方法之外，例如this fiddle，或者点击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("");
});

或

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

点击，代码执行不止一次

2 个答案: