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

問題は、最初の入力では正常に機能することですが、2番目の入力をクリックすると、コードが2回実行され、3番目の入力で同じ文字が2回書き込まれます。これは、ツリーにアイデアを掛けたものです。なぜこのように動作するのでしょうか。

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 に答える