Question

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

以下是我的一个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>

我尝试了下面的代码，但现在当网页加载

时，该功能根本不起作用

根据你的建议，我尝试了下面的代码，但现在该功能根本不起作用。我知道我可能做错了什么。

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

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

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

<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>

Answer 1

如果您的动态内容被附加到显示的HTML代码段，请在我的示例中使用父元素（显示为#entry1）而不是body：

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

将函数绑定到父div标记

1 个答案: