Question

我在html代码下面有这样的表结构。这里我有一个选择框，从我的数据库页面加载填充，我已经在选择框上给了一个内联函数，以便在用户更改选择框值时调用..但它没有调用选择框上的jquery函数onChange ..请可以你知道为什么吗？

我的jquery：

 $(document).ready(function() { 
              $.fn.ActivityOptionChange = function(id) {  
                  alert("test"); 
            };
      ....
      ....

HTML

<table cellspacing="0" class="table table-condensed TF" style="width: 100%;" id="table6">
   <tbody>
      <tr class="fltrow">
         <td><input id="flt0_table6" type="hidden" ct="0" class="flt"></td>
         <td><input id="flt1_table6" type="hidden" ct="1" class="flt"></td>
         <td><input id="flt2_table6" type="hidden" ct="2" class="flt"></td>
         <td><input id="flt3_table6" type="hidden" ct="3" class="flt"></td>
         <td><input id="flt4_table6" type="hidden" ct="4" class="flt"></td>
         <td><input id="flt5_table6" type="hidden" ct="5" class="flt"></td>
         <td><input id="flt6_table6" type="hidden" ct="6" class="flt"></td>
         <td><input id="flt7_table6" type="hidden" ct="7" class="flt"></td>
      </tr>
      <tr class="success">
         <td style="width: 15%;">S.no</td>
         <td style="width: 15%;">Activity Name</td>
         <td style="width: 5%;">Activity Option</td>
         <td style="width: 5%;">Time(HR:MIN)</td>
         <td style="width:10%;">cals</td>
         <td style="width: 5%;">distance</td>
         <td style="width: 5%;">Unit</td>
         <td style="width: 15%;">Submit</td>
      </tr>
      <form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid44"></form>
      <tr id="formrowid44" class=" odd">
         <td style="width:5%;">1</td>
         <td style="width:25%;" class="text-capitalize"><a href="localhost/tbft/webapp/index.php/logs/activity/44/43">bicycling, BMX or mountain</a></td>
         <td style="width:25%;" class="text-capitalize">-</td>
         <td style="width:15%;" class="text-capitalize">
            <div style="display:inline-flex;"><input maxlength="2" id="time-hr-id44" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(44);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(44);" id="time-min-id44" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
         </td>
         <td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id44" value="8.5"><span id="cals-id44" class="cals">0.00</span></td>
         <td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id44" type="text" style="width:50px;text-align:center;"> </td>
         <td style="width:5%;" class="text-capitalize">

         </td>
         <td style="width:5%;" class="text-capitalize">  <button onclick="$(this).SubmitForm(44);" class="btn btn-success" type="button">
            <span class="glyphicon glyphicon-plus"></span>
            </button>
         </td>
      </tr>
      <form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid45"></form>
      <tr id="formrowid45" class=" even">
         <td style="width:5%;">2</td>
         <td style="width:25%;" class="text-capitalize"><a href="localhost/tbft/webapp/index.php/logs/activity/45/43">bicycling/biking</a></td>
         <td style="width:25%;" class="text-capitalize">
            <select name="activity_option_id" class="selectbox" onchange="$(this).ActivityOptionChange(45)" id="activity-opn-Id45">
               <option value="45_4.0">10 mph or less</option>
               <option value="47_6.0">10-11.9 mph, leisure, slow, light effort</option>
               <option value="46_8.0">general</option>
               <option value="48_16">greater then 20 mph, racing, not drafting</option>
            </select>
         </td>
         <td style="width:15%;" class="text-capitalize">
            <div style="display:inline-flex;"><input maxlength="2" id="time-hr-id45" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(45);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(45);" id="time-min-id45" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
         </td>
         <td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id45" value="4.0"><span id="cals-id45" class="cals">0.00</span></td>
         <td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id45" type="text" style="width:50px;text-align:center;"> </td>
         <td style="width:5%;" class="text-capitalize">
            -
         </td>
         <td style="width:5%;" class="text-capitalize">  <button onclick="$(this).SubmitForm(45);" class="btn btn-success" type="button">
            <span class="glyphicon glyphicon-plus"></span>
            </button>
         </td>
      </tr>
      <form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid49"></form>
      <tr id="formrowid49" class=" odd">
         <td style="width:5%;">3</td>
         <td style="width:25%;" class="text-capitalize"><a href="localhost/tbft/webapp/index.php/logs/activity/49/43">unicycling</a></td>
         <td style="width:25%;" class="text-capitalize">-</td>
         <td style="width:15%;" class="text-capitalize">
            <div style="display:inline-flex;"><input maxlength="2" id="time-hr-id49" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(49);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(49);" id="time-min-id49" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
         </td>
         <td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id49" value="5.0"><span id="cals-id49" class="cals">0.00</span></td>
         <td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id49" type="text" style="width:50px;text-align:center;"> </td>
         <td style="width:5%;" class="text-capitalize">

         </td>
         <td style="width:5%;" class="text-capitalize">  <button onclick="$(this).SubmitForm(49);" class="btn btn-success" type="button">
            <span class="glyphicon glyphicon-plus"></span>
            </button>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

尝试使用jQuery .on（'change'）函数：

$(document)ready(function() {
    $('body').on('change', '#activity_option_id', function() {
        alert('test');
    });
});

另见。on() jQuery Documentation

编辑：回复您的评论：如果您有多个需要ID的选择框，您可以实施基于类的解决方案：

<select id="your_id_here1" class="formSelect" />
<select id="your_id_here2" class="formSelect" />

$(document)ready(function() {
    $('body').on('change', '.formSelect', function() {
        var elementID = this.id;
        alert(elementID);
    });
});

使用此解决方案，任何带有.formSelect类的选择框都将绑定更改事件，并且更改的特定输入元素的ID将显示在警告框中。

无法在选择框上调用onChange事件

1 个答案: