jQueryオートコンプリートは、動的に作成されたフォームの変更関数で変数を渡さない

Question

var entryOnlyがiを正しく渡していない理由を理解しようとしています。

http://jsfiddle.net/sjxuy766/2/

この変数は、オートコンプリートボックスに「自由なタイピング」を防ぐために行われています。 この変数の関数が#search（正しく非動的に作成された部分..あなただけで入力することはできません）で正しく動作しているのを見ることができます。

var entryOnly = function (event, ui) { 
      if(!ui.item){ 
       $("input[id="+ (i+1) +"]").val(""); 
      } 
    } 

助けが必要ですか？

Answer 1

例のiの値は、aAdd行がクリックされた回数とユーザーが入力しようとしている行の回数に基づいて変化し続けるためです。イベントを発生させた正確な要素を取得するには、even.targetを使用する必要があります。

var entryOnly = function (event, ui) { 
       if(!ui.item){ 
        $(event.target).val(""); 
       } 
     } 

フィドル：http://jsfiddle.net/3xa20em7/

Answer 2

あなたは閉鎖問題に直面しています。確かに、準備文書で、あなたは私が変数を定義し、それぞれのためにあなたは、この値をインクリメントし、entryOnlyとselectRow関数に渡しadd_rowをクリックしてください。あなたの問題を解決するため

一つの方法は、bind機能に現在のコンテキストである：

$("input[id="+ i +"]").autocomplete({ 
    source: aTags, 
    select: selectRow.bind(this, i), 
    minLength: 1, 
    change:entryOnly.bind(this, i) 
}); 

もう一つの方法は、Immediately-invoked function expressionまたはあなたのケースでこのキーワードを使用することです。

スニペット：

var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"]; 
 

 
var selectRow = function (event, ui) { 
 
    $("#search").val(ui.item.value); 
 
    return false; 
 
} 
 

 
$(function() { 
 
    $("#search").autocomplete({ 
 
    source: aTags, 
 
    select: selectRow, 
 
    minLength: 1, 
 
    change: function (event, ui) { 
 
     if(!ui.item){ 
 
     $("#search").val(""); 
 
     } 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    var i=1; 
 
    $("#add_row").click(function(){ 
 
    $('#addi'+i).html("<td class='text-center'>"+ (i+1) +"</td><td><div class='ui-widget search_form'><input class='search_field' id='" + i + "' placeholder='enter a product name'/><div class='search_icon'></div></td><td><div class='quantity1'><label for='number'>Quantity</label><select name='number' id='number' class='selectmenu'><option selected='selected'>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option></select></div></td>"); 
 

 
    $('#tab_logic').append('<tr id="addi'+(i+1)+'"></tr>'); 
 

 
    var selectRow = function (i, event, ui) { 
 
     $("input[id="+ i +"]").val(ui.item.value); 
 
    } 
 

 
    var entryOnly = function (i, event, ui) { 
 
     if(!ui.item){ 
 
     $("input[id="+ i +"]").val(""); 
 
     } 
 
    } 
 

 
    $("input[id="+ i +"]").autocomplete({ 
 
     source: aTags, 
 
     select: selectRow.bind(this, i), 
 
     minLength: 1, 
 
     change:entryOnly.bind(this, i) 
 
    }); 
 

 
    i++; 
 

 
    }); 
 
    $("#delete_row").click(function(){ 
 
    if(i>1){ 
 
     $("#addi"+(i-1)).html(''); 
 
     i--; 
 
    } 
 
    }); 
 
});

input { 
 
    border:1px solid #cccccc; 
 
    border-radius: 3px 3px 3px 3px; 
 
    width: 370px; 
 
    padding: 9px 9px 9px 9px; 
 
    margin: 3px 0px 3px 3px; 
 
    color: #e1e1e1; 
 
} 
 

 
input:focus { 
 
    border-color:#00cc33; 
 
    box-shadow:0 0 10px #d5d5d9; 
 
    -webkit-box-shadow:outset 0 1px 9px #d5d5d9; 
 
    -moz-box-shadow:outset 0 1px 9px #d5d5d9; 
 
    color: #676767; 
 
} 
 

 
/* min Jquery CSS elements for autocomplete */ 
 
.ui-autocomplete { position: absolute; cursor: default; } 
 
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; background-color:#f9f9f9; border: 1px solid #efefef; border-radius: 3px 3px 3px 3px; } 
 

 
.ui-menu .ui-menu { 
 
    margin-top: -3px; 
 
} 
 
.ui-menu .ui-menu-item { 
 
    margin:0; 
 
    padding: 0; 
 
    zoom: 1; 
 
    float: left; 
 
    clear: left; 
 
    width: 100%; 
 
    font-family:arial; 
 
} 
 
.ui-menu .ui-menu-item a { 
 
    text-decoration:none; 
 
    display:block; 
 
    padding:.1em .3em; 
 
    line-height:1.5; 
 
    zoom:1; 
 
} 
 
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { 
 
    font-weight: bold; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-md-3"> 
 

 
    </div> 
 
    <div class="col-md-6" id="inputform"> 
 

 
     <form id="inventorytoadd"><table class="table table-bordered table-hover" id="tab_logic"> 
 
      <thead> 
 
      <tr > 
 
       <th class="text-center" width="10%"> 
 
        # 
 
       </th> 
 
       <th class="text-center" width="68%"> 
 
        SKU 
 
       </th> 
 
       <th class="text-center" width="22%"> 
 
        Quantity 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr id='addi0'> 
 
       <td class="text-center" width="10%"> 
 
        1 
 
       </td> 
 
       <td width="68%"> 
 
        <div class="ui-widget search_form"><input class="search_field" id="search" placeholder="enter a product name"/> 
 
       </td> 
 
       <td width="22%"> 
 
        <div class="quantity1"> 
 
         <label for="number">Quantity</label> 
 
         <select name="number" id="number" class="selectmenu"> 
 
          <option selected="selected">1</option> 
 
          <option>2</option> 
 
          <option>3</option> 
 
          <option>4</option> 
 
          <option>5</option> 
 
          <option>6</option> 
 
          <option>7</option> 
 
          <option>8</option> 
 
          <option>9</option> 
 
          <option>10</option> 
 
          <option>11</option> 
 
          <option>12</option> 
 
          <option>13</option> 
 
          <option>14</option> 
 
          <option>15</option> 
 
          <option>16</option> 
 
          <option>17</option> 
 
          <option>18</option> 
 
          <option>19</option> 
 
         </select> 
 
        </div> 
 
       </td> 
 
      </tr> 
 
      <tr id='addi1'></tr> 
 
      </tbody> 
 
     </table></form> 
 

 
    </div> 
 
    <div class="col-md-3"> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-3"> 
 
    </div> 
 
    <div class="col-md-6 add-delete-rows" id="inventory-add"> 
 
     <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a><br /><br /> 
 
    </div> 
 
    <br /><br /><br /><br /> 
 
</div> 
 
<div class="col-md-3"> 
 
</div> 
 
</div>