如何使用select標簽綁定onchange事件

Question

我想在選擇時綁定一個onChange事件。 但它不起作用。 當我選擇項目時，沒有任何反應。 代碼有什么問題？

  function onClickPlusAddonsItems()
     {
       $('.plus-addons-items').on('click',function(){
       var html = '';
        html += '<tr>';
        html += '<td><select name="sltaddonscategory[]"
                  id="sltaddonscategory" class="form-control" 
                  onChage="getAddonsDetails(this.value);">\n\
                 <option value="">Select Category</option><?php echo 
                 fill_addons_category($db); ?></select></td>';
        html += '<td><select name="sltaddonsitems[]" id="sltaddonsitems" 
                 class="form-control"></select></td>'; 
        html += '<td><input type="number" name="txtquantity" 
                 id="txtquantity" class="form-control" /></td>';
        html += '<td><button type="button" name="minus-addons-items" 
                class="btn btn-danger btn-sm minus-addons-items">\n\
             <span class="glyphicon glyphicon-minus"></span></button></td>';
        html += '</tr>';
       $('#addons-item-table').append(html);
    });

  }

  function getAddonsDetails(val)
 {
    alert(val);
 }

Answer 1

您應在ready或winload文檔上注冊click事件。

以下將起作用。

  $(document).ready(function(){            
           $('.plus-addons-items').on('click',function(){
           var html = '';
            html += '<tr>'; // Please note onchange attribute of select tag
            html += '<td><select name="sltaddonscategory[]"
                      id="sltaddonscategory" class="form-control" 
                       onchange="getAddonsDetails(this.value);">\n\     
                     <option value="">Select Category</option><?php echo 
                     fill_addons_category($db); ?></select></td>';
            html += '<td><select name="sltaddonsitems[]" id="sltaddonsitems" 
                     class="form-control"></select></td>'; 
            html += '<td><input type="number" name="txtquantity" 
                     id="txtquantity" class="form-control" /></td>';
            html += '<td><button type="button" name="minus-addons-items" 
                    class="btn btn-danger btn-sm minus-addons-items">\n\
                 <span class="glyphicon glyphicon-minus"></span></button></td>';
            html += '</tr>';
           $('#addons-item-table').append(html);
        });

      })

Answer 2

我猜想您的<select>在<table> 。 如果要使用change事件，則不應使用click ，而應使用... um change 。

所述<select>該年代由第一生成<select>需要具有事件（點擊這個演示）（從一個祖先元素指派給它的table#T在此演示）。

如果您使用的是巨大的字符串，請嘗試使用模板文字，而不是文字字符串的10倍。

BTW作為獎勵，我還添加了刪除行的功能。 選中要刪除的行的所有復選框，然后選擇“ DEL”選項。

演示版

 var idx = 0; $('.plus-addons-items').on('change', function() { var $opt = $(this).find('option').first(); if ($(this).val() === 'ADD') { idx++; var html = ` <tr> <td> <select name="sltaddonscategory[]" id="sltaddonscategory${idx}" class="form-control"> <option value="IT WORX">Select Category</option> <?php echo fill_addons_category($db);?> </select> </td> <td> <select name="sltaddonsitems[]" id="sltaddonsitems${idx}" class="form-control"> </select> </td> <td> <input type="number" name="txtquantity" id="txtquantity${idx}" class="form-control"> </td> <td> <label name="minus-addons-items" class="btn btn-sm btn-danger del"> <input class='chx' type='checkbox'> </label> </td> </tr>`; $('#T').append(html); } else if ($(this).val() === 'DEL') { $('.chx').each(function(idx) { if ($(this).is(':checked')) { $(this).closest('tr').remove(); } }); } else { return } $opt.prop('selected', true); }); $('#T').on('click', function(e) { if (e.target !== e.currentTarget) { if (e.target.name === 'sltaddonscategory[]') { var data = $(e.target).val(); getAddonsDetails(data); } } else { return false; } }); function getAddonsDetails(data) { alert("HEY! " + data + "HI I'M AN IRRITATING ALERT!!!!!! HEY YOU! YEAH YOU! HEY MYSTERY FUNCTION getAddonsDetails() IS WORKING!!!!!"); } 

 label.btn.btn-sm { display: inline-block; transform: translateY(4px); padding: 2px 0; width: 30px; } .chx { transform: translateY(3px); width: 15px; height: 15px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" /> <table id='T'> <tr> <td> <select class='plus-addons-items form-control'> <option default>---------------</option> <option value='ADD'>ADD</option> <option value='DEL'>DEL</option> </select> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>