1

为了让用户可以用阿拉伯语书写，我编写了以下代码 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("");
    });
});​

问题是第一个输入工作正常，但是 onclick 到第二个输入我执行了两次代码，第三个输入写了两次相同的字符，它的树乘以任何想法，为什么我会这样？

4

2 回答 2

4

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

于 2012-09-11T15:48:17.713 回答
3

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

您可以像这个小提琴一样简单地将事件移动到 $(".arab").click() 方法之外，或者像这个小提琴一样删除点击时的侦听器。

$(".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("");
    });
});
于 2012-09-11T15:49:55.843 回答