how to stop jQuery default accumulative loop

Question

I've write a addrow event like this....

$('.addRow').click(function(){
var $newTr = $('#tb1 tbody>tr:last').clone(true);
$newTr.insertAfter('#tb1 tbody>tr:last');
newRowNum += 1;
$newTr.find('input[id^=foods]').attr('id', function(){
 var newID = 'foods' + newRowNum ;
 $(this).attr('id',newID).attr('name',newID).attr('class',newID);
});
$('input[id=foods'+ newRowNum +']').jsonSuggest( 
 function(text, wildCard, caseSensitive, notCharacter) { 
  rez = $.ajax({ 
  type: 'GET', 
  url: 'getFoodJSON.jsp',
  data: 'foods=' + text,
  dataType: 'json', 
  async: false 
});
return eval(rez.responseText); 
},
{ ajaxResults:true 
});

New rows just cloned including a formfield, I've assign new formfield ID, and want to use suggestbox function in this new create formfield, However it seems proceed many times base on the variable newRowNum, after click the addrow button 3times, I use firebug and saw like this... Would you mind to tell me how to stop the accumulative proceed in this function? Thank you very much.

Cage

<td height="30">
<input id="foods3" class="foods3" type="text" maxlength="30" size="35" name="foods3" autocomplete="off"/>
<div class="jsonSuggestResults" style="top: 203px; left: 283.55px; width: 232px; display: none;"/>
<div class="jsonSuggestResults" style="top: 203px; left: 283.55px; width: 232px; display: none;"/>
<div class="jsonSuggestResults" style="top: 203px; left: 283.55px; width: 232px; display: none;"/>

Answer 1

Can't understand you clearly but can you check how many items you get with $('input[id=foods' + newRowNum + ']') every click?

It look like you set similar id to every input[id^=foods] with this code $newTr.find('input[id^=foods]').attr('id'...

Answer 2

Assuming you mean you're worried about the duplicated divs, what's happening is that when you clone(true) you are copying the whole row, including the <div class="jsonSuggestResults"> element that is inside it. You then get a new jsonSuggestResults when you instantiate the new jsonSuggest, so each row ends up with one more div.

You could remove the div from the clone manually, or just create the whole row from scratch. But probably easiest would be to take an off-document clone of the div at the very start of the script before you add any jsonSuggests, and clone the clone for each new row you want to add.

Also:

$newTr.find('input[id^=foods]').attr('id', function(){
    var newID = 'foods' + newRowNum ;
    $(this).attr('id',newID).attr('name',newID).attr('class',newID);
});

This is very odd and probably not what you meant to do. When you pass a function to attr it is supposed to return the value of the attr you want to set for each element in turn; you're not expected to mutate the element inside the function. The above is equivalent to the more obvious:

var newID= 'foods'+newRowNum;
$newTr.find('input[id^=foods]').attr('id',newID).attr('name',newID).attr('class',newID);

or:

$newTr.find('input[id^=foods]').attr({id: newID, name: newID, 'class': newID});

Similarly:

$newTr.insertAfter('#tb1 tbody>tr:last');

Why not:

$newTr.appendTo('#tb1 tbody');

Answer 3

i have a little bit different problem. how to make this plugin working async instead of async?? www.zodynas.lt