2014-09-26 228 views
0

我有一个表单应该在变化的“注释”文本区域附加一些值。我有几个这样的,虽然有些工作正常,但其他人追加文本3次。下面是在激发代码的多个时间的示例:jQuery .append Onchange事件触发多次

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发生两次当文档加载,而一旦当值在下拉列表中更改。如果它很重要,则“制造_div”将启动为隐藏状态,直到表单中较早的下拉列表中选择某个值为止。

我已经使用谷歌搜索并搜索了所有内容,但是我发现的所有内容都没有以某种方式适用于我的情况。我也找到了答案,指出p标签没有被关闭,但在这里似乎不是这种情况。我试图从

.change(function().... 

改变了jQuery

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

但这并没有帮助。

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

如果您需要查看更多代码(有些隐私问题会阻止我显示太多或提供网址),或者需要澄清,请告知我们。

谢谢!

+0

应该只火所选选项的改变是正确的在你的代码。 – 2014-09-26 18:46:22

+0

我有大约20个这样的形式。这会影响它吗? – 2014-09-26 19:00:45

+0

'ID'必须是唯一的。 – 2014-09-26 19:01:55

回答

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>