jquery 设置 function 对每个动态添加的输入 id 做出反应并获取此输入 id 号

Question

I dynamically add more input fields where orders id goes like this, orders1, orders2, orders3, etc.:

html_code += '<input type="text" name="orders[]" id="orders'+count+'">';

now I have this code:

$('#orders1 / 2 3').typeahead({ **//here I need to set to javascript react on all numbers dynamically**
 //mycode ...
 ordernumber = 1 / 2 3...; **//here I need to extract number**
 updater: function (obj) {
            var item = JSON.parse(obj);
            $('#orderitem' + ordernumber).val(item.tax);
            return item.name;
        }
});

1. how should I set $('#orders1 / 2 3') to be able to react on every dynamically added input?
2. how can I get ordernumber to be able to set it up on line $('#orderitem' + ordernumber)?

Answer 1

A better option would be to add a class to all dynamic inputs and to get ordernumber set a data-* custom attribute like:

html_code += '<input class="orders" data-number="'+ count +'" name="orders[]" id="orders'+count+'">';

and then you can apply typeahead to all of them like:

$('.orders').each(function() {

  //here extract number
  var ordernumber = $(this).data('number');

  // here initialise typeahead
  $(this).typeahead({
    ....
  });
});

---

Edit:

Put this logic in a function like:

function reInit(){
    $('.orders').each(function() {

      //here extract number
      var ordernumber = $(this).data('number');

      // here initialise typeahead
      $(this).typeahead({
        ....
      });
    });
}

// Call the function initially
reInit();

and adding the elements dynamically and appending it to the dom call the function again.

html_code += '<input class="orders" data-number="'+ count +'" name="orders[]" id="orders'+count+'">';

// I don't know how are you adding the item to dom
// but something like
$(parent).append( html_code )

// Now call the function again
reInit();