jQuery autocomplete not passing i variable in change function for dynamically created form

Question

Trying to figure out why var entryOnly is not passing i properly.

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

This variable is being made to prevent "free typing" in autocomplete box. You can see this variables function is working properly in #search (the non-dynamically created portion.. you can't just type in it).

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

Any help?

Answer 1

You are facing a closure issue. Indeed, in the document ready you define a variable i and for each click on add_row you increment this value and pass it to the entryOnly and selectRow functions.

One way to solve your problem is bind the current context to the functions:

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

Another way is to use Immediately-invoked function expression or in your case the this keyword.

The snippet:

 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> 

Answer 2

Since the value of i in your example will keep on changing based on the fact the how many times aAdd Row is clicked and on which row user is trying to type. you should use the even.target to get the exact element which once has raised the event.

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

Fiddle : http://jsfiddle.net/3xa20em7/