Question

我有一个表单应该在更改时将一些值附加到“Notes”文本区域。我有几个，虽然有些工作得很好，但其他人附加了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”将隐藏起来，直到在表单中的下拉列表中选择某个值为止。

我用谷歌搜索过，并搜索过，但我发现的一切并没有完全适用于我的情况。我也找到了关于p标签未被关闭的答案，但这似乎并非如此。我试过从

更改jQuery

.change(function()....

到

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

但这也没有帮助。

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

如果您需要查看更多代码（有一些隐私问题导致我无法显示或提供网址），或者需要澄清，请告诉我。

谢谢！

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>

jQuery .append多次触发Onchange事件

1 个答案: