jQuery .append Onchange 事件多次触发

Question

我有一个表单，应该在更改时将一些值附加到“注释”文本区域中。我有几个这样的，虽然有些工作得很好，但其他的则附加了 3 次文本。这是多次触发的代码示例：

HTML：

   <tr class="manufactured_div" title="Appraisal report must indicate there are no issues with the structural modifications or that the integrity of the seal of the home has not been compromised" >

    <td colspan="6">

        <b>Are there any structural modifications or additions?</b>

            <select class="table3_select" name="mfr_structural" id="mfr_structural">

                <option value=""></option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>

            </select>    

      </td>

</tr>

jQuery：

    $('#mfr_structural').change(function(){
    var text = $(this).val();
    var insert = '\n* MFR Structural Mods? : ' + text;
    $('#activity_summary').append(insert);
});

.append 在文档加载时发生两次，在下拉列表中的值更改时发生一次。如果重要的话，“manufactured_div”开始时会处于隐藏状态，直到在表单前面的下拉列表中选择某个值为止。

我已经用谷歌搜索了这个，并搜索了SO，但我发现的所有内容在某种程度上并不完全适用于我的情况。我还找到了涉及 p 标签未关闭的答案，但这里的情况似乎并非如此。我尝试过从

更改 jQuery

.change(function().... 

到

.on('change', function()... 

但这也没有帮助。

我需要发生的是 .append 仅在下拉列表中进行选择时才会触发。如果下拉列表没有改变，那么我不希望它附加到注释 div 中。

如果您需要查看更多代码（存在一些隐私问题，我无法显示太多代码或提供 URL），或者是否需要澄清，请告诉我。

谢谢！

Answer 1

不确定您做错了什么，因为您没有粘贴更多代码。但请单击下面的按钮来运行我的代码版本。完全按照您的意愿行事。

$(function() {

  $('#mfr_structural').change(function() {
    var text = $(this).val();
    var insert = '\n* MFR Structural Mods? : ' + text;
    $('#activity_summary').append(insert);
    console.log(insert);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="manufactured_div" title="Appraisal report must indicate there are no issues with the structural modifications or that the integrity of the seal of the home has not been compromised">

  <td colspan="6">

    <b>Are there any structural modifications or additions?</b>

    <select class="table3_select" name="mfr_structural" id="mfr_structural">

      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>

    </select>

  </td>

</tr>
  </table>
<div id="activity_summary"></div>

Answer 2

$(function() {

  $('#structural_base').change(function() {
    var text = $(this).val();
    var insert = '\n* MFR Structural Mods? : ' + text;
    $('#activity_sum').append(insert);
    console.log(insert);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="manufactured_div" title="Appraisal report must indicate there are no issues with the structural modifications or that the integrity of the seal of the home has not been compromised">

  <td colspan="6">

    <b>Are there any structural modifications or additions?</b>

    <select class="table3_select" name="structural_base" id="structural_base">

      <option value=""></option>
      <option value="Hello">Hello</option>
      <option value="HowAreYou">HowAreYou</option>

    </select>

  </td>

</tr>
  </table>
<div id="activity_sum"></div>