Append input type property not working in jquery

Question

I have table structure dynamic add row option. It makes a new row when I click add but problem is $("[name*=vehicle_type]").change(function () it's not work for append input field

Only work for this

<select name="vehicle_type[]" class="form-control company" id="company" required>
              <option value="type">Type</option>
</select>

But not works for this

$('#dynamic_field').append('<tr id="row'+i+'"><td><select name="vehicle_type[]" class="form-control company" id="company" style="width: 140px;" required><option value=""> Type</option>'+val_all_types+'</select></td></tr>');  
  });

Here is jquery code

$("[name*=vehicle_type]").change(function () {
      //  alert('ok');
        var $type = $(this); 
        var $row = $type.closest("tr"); 
        var $cat = $("[name*=vehicle_category]", $row); 
        var $subcat = $("[name*=vehicle_sub_category]", $row);
        $.ajax({
            url: 'getCat',
            type: "get",
            data: { type: $type.val() },
            success: function(data) {
                $cat.empty();
                $subcat.empty();
                $.each(data, function (i, d) {
                    $cat.append($('<option>', {
                        value: d.id,
                        text : d.V_Category
                    }));
                });
            }
        });    
    });

Give this a quick read: https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — justDan, Apr 23 '19 at 17:32

score 1 · Accepted Answer · answered Apr 23 '19 at 17:34

1

You need to replace $("[name*=vehicle_type]").change(function () { to $(document).on("change", "[name*=vehicle_type]" , function() {

answered Apr 23 '19 at 17:34

Dorian Mazur

514
2
12

Thanks a lot. it's working. Can you please describe why that not works? – mr mithun Apr 23 '19 at 17:41
It's because you need to delegate the event to an element that is static on the page. Rather than `document` you should use nearest element instead. – EternalHour Apr 23 '19 at 17:43
Your code is generated dynamically. To bind the `change` event to all existing and future elements, you need to use the jQuery on() method – Dorian Mazur Apr 23 '19 at 17:43
If you have time can you please provide me your answer on **$("[name*=vehicle_type]").change(function () {** – mr mithun Apr 23 '19 at 17:55
I don't understand – Dorian Mazur Apr 23 '19 at 17:59
Rather than document you should use nearest element instead. – EternalHour – mr mithun Apr 23 '19 at 18:16

Append input type property not working in jquery

1 Answers1