Refresh javascript's function without using Recursion

Question

I'm trying to create a simple form where i can add more text field after current text field.

And also i can add more field from the new field that ive added before (im using Recursion for this).

Problems come when i click the add on the first field, it creates more then 1 new fields (this happens because of recursion)

how do i refresh javascripts function without calling it again and again?

HTML :

<div class="line-input">
  <input type='text' class='ipt-txt'>
  <input type='submit' class='btn-smt' value="add new">
</div>

JS :

$(document).ready(function(){
    callFunction();
});

function callFunction(){
    $(".btn-smt").click(function(e){
    $(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
    callFunction();
  });
};

JSFiddle : https://jsfiddle.net/1uofya3k/

Thanks!

Answer 1

Use event delegation:

$(function() {
   $(document).on("click", ".btn-smt", function(e) {
     $(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
   });
});

That sets up an event handler at the document level that responds to clicks on your button class. You only have to add it once, and it'll work for all subsequent elements that are added dynamically.

(You don't really even have to do it in a "ready" handler; you can set it up before the DOM has been completed.)