Javascript 将函数绑定到父div标记

对于编程来说，我是一个新手，我正在为一个朋友做一个项目，但是我的函数在动态加载一段代码后停止工作。我有一个按钮，可以克隆表单的一部分并自动增加输入ID。我尝试重写函数并在输入名称后添加一个2，但函数仍然停止工作。我和一位开发人员朋友谈过，他说如果我将我的函数绑定到父div标记，它应该会修复它，但我不知道如何做到这一点。希望我能解释清楚

下面是一个my JS函数的示例，它应该显示/隐藏div标记及其内容

$(document).ready(function () {
    toggleFieldsnow();

    $("#typeofinstallation").change(function () {
        toggleFieldsnow();
    });

});

function toggleFieldsnow() {
    if ($("#typeofinstallation").val() == "Snow_Melt")
        $("#show_hide_sm").show();
    else
        $("#show_hide_sm").hide();
}

以下是我的HTML代码片段

<div id="entry1" class="clonedInput">
<script type="text/javascript" src="js/toggle_other.js"></script>
  <h2 id="reference" name="reference" class="heading-reference">
<span id="Zone"></span></h2>

   <!--<p name="reference"><strong>Note:</strong> Please use <strong>zone 1</strong> as a template for any additional zones you would like to create, then click add zone. Then  fill out the required information. Menu options and fields may change depending on what you select for your zone.</p>-->

  <fieldset>

<!-- Select Basic -->
<div class="form-group"><!-- end .select_ttl -->
  </div>

<!-- Text input-->
<div class="form-group">
  <label class="label_fn control-label" for="ZoneName"><a href="http://www.pexheat.com/site/helpFilesFolder/zoneName.html" onclick="javascript:void window.open('http://www.pexheat.com/site/helpFilesFolder/zoneName.html','1395159238843','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=0,top=0');return false;"><u>Zone Name</u></a>:</label>
  <input name="ZoneName" type="text" required class="input_fn form-control" id="ZoneName" placeholder="" value="Zone 1" title="Please enter a name for the zone. This name will be use to distinguish this zone from others in your project." style="background:#FFFFCC;">
</div>

<!-- Text input-->
<div class="form-group" id="show_hide_dr">
  <label class="label_ln control-label" for="DesignTemp"><a href="http://www.pexheat.com/site/helpFilesFolder/designRoomTemperature.html" onclick="javascript:void window.open('http://www.pexheat.com/site/helpFilesFolder/designRoomTemperature.html','1395159238843','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=0,top=0');return false;"><u>Design Room Temp</u></a>:</label>
  <input name="DesignTemp" type="text" class="input_ln form-control" id="DesignTemp" placeholder="68" value="" title="" style="background:#FFFFCC;">
</div>
<div class="form-group" id="show_hide_sm">
  <label class="label_sm control-label" for="SnowMelting"><u>Snow Melting Class</u></a>:</label>
  <input name="SnowMelting" type="text" class="input_sm form-control" id="SnowMelting" placeholder="(1 to 3; 1 = Residential, 3 = Commercial)"title="Required Field" style="background:#FFFFCC;">
</div>
</div>

这是我试图将函数绑定到的代码：

<div class="form-group">
          <label class="label_toi control-label" for="typeofinstallation"><a href="http://www.pexheat.com/site/helpFilesFolder/typeOfInstallation.html" onclick="javascript:void window.open('http://www.pexheat.com/site/helpFilesFolder/typeOfInstallation.html','1395159238843','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=0,top=0');return false;"><u>Type of Installation</u></a>:</label>
          <select name="typeofinstallation" class="input_toi form-control" id="typeofinstallation" style="background-color:#FFFFCC" title="The type of radiant floor installation is usually determined by the construction of the zone. All types of radiant floor installation (except electric) typically have more than enough heating capacity for a zone. The differences in efficiency and response of the types are mostly insignificant. Your main concerns in choosing an installation type should be cost and effort of installation. See the help text for each installation type for details.">
            <option selected="" value="1">(Choose One)</option>
  <option value="Concrete">Concrete Slab</option>
  <option value="Staple">Staple-Up </option>
  <option value="Above">Above Floor Sleeper System </option>
  <option value="Baseboard">Baseboard  </option>
  <option value="Fan">Fan Coil </option>
  <option value="Snow_Melt">Snow Melting </option>
</select>
        </div>

<div class="form-group" id="show_hide_sm">
  <label class="label_sm control-label" for="SnowMelting"><u>Snow Melting Class</u></a>:</label>
  <input name="SnowMelting" type="text" class="input_sm form-control" id="SnowMelting" placeholder="(1 to 3; 1 = Residential, 3 = Commercial)"title="Required Field" style="background:#FFFFCC;">
</div>

:
（选择一个）
混凝土板
装订
地上轨枕系统
踢脚板
风机盘管
融雪
融雪等级：

如果您的动态内容被追加到所示的HTML代码段中，请在我的示例中使用父元素（看起来是

#entry1

），而不是

主体

：

$('body').on('change', '#typeofinstallation', function () {
    toggleFieldsnow();
});

---

我试过了，但可能我仍然做了一些错误的事情。你能发布一个你试图绑定到的select元素的示例吗？你是否尝试过在我发布时使用“body”选择器？我猜内容没有添加到

#entry1

好的，我会试试看，然后告诉你是否有效！谢谢你的帮助！

$('body').on('change', '#typeofinstallation', function () {
    toggleFieldsnow();
});