在select下拉列表中，insertAfter（）具有奇怪的行为。在页面加载时，它会插入多个div

Question

我遇到了一个奇怪的问题，当用户在下拉菜单中选择一个选项然后重新加载页面时，我会显示一条消息。当用户最初选择该选项时，它可以正常工作/显示，但是当您重新加载它时，似乎多次显示了带有消息的div。这是我的代码块，其中包含change函数和div。它的初始状态设置为display：none。我尝试了多项尝试均无济于事。谢谢。由于“选择”的内容过多，无法在此处发布，因此我附上了HTML的屏幕截图。希望对您有帮助

    var $desiredProposal = $('#am_oie_string_desired_proposal');
    var $displayAutoInventory = $('input[name=oie_string_display_auto_inventory]');
    var $autoInventoryWebAddress = $('#am_oie_string_auto_inventory_web_address');

  $desiredProposal.change(function() {
    var desProp = $desiredProposal.val();
    if (desProp.match(/auto/gi)) {
        $displayAutoInventory.closest('.field').show();

    } else {
        $displayAutoInventory[0].checked = false;
        $displayAutoInventory[1].checked = false;
        $displayAutoInventory.closest('.field').hide();
    }

    //Cannabis Selection with message -- this is what's not working correctly
    if (desProp.match(/cannabis/gi)) {
        $( "<div class='msg'>Note: Upon approval of this campaign order, a more intricate audit process will be done to ensure that the campaign will be approved to run.</div>" ).insertAfter($desiredProposal);
        $('.msg').show();
    }
     else {
        $('.msg').remove();
        $('.msg').hide();
    }
   $displayAutoInventory.change();
 });

$desiredProposal.change();


 // HTML