锚标签无法从显示无 div 触发点击功能答案

【问题标题】：anchor tag cant fire click function from display none div锚标签无法从显示无 div 触发点击功能
【发布时间】：2018-03-26 20:31:43
【问题描述】：

不显示样式的 div 有一个锚标记，它将在点击功能时删除该 div

对于完整的代码审查链接，它在浏览器上工作，但不在 jsfiddle 上

https://jsfiddle.net/eqaxh7d0/

我正在将 display none div 添加到另一个显示块的 div 中，因此显然锚标记将可见，但是

但没有点击功能

为了删除，我正在使用此代码

$(document).ready(function() {
   $('.close-div').on('click',function() {
       $(this).closest('div#nestedFeilds').remove();
   });     
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

jQuery 未在链接的 jsfiddle 中加载。如果单击<a> 元素的预期结果是删除父元素，您可以将.innerHTML 附加到<div> 元素附加click 事件到<div> 元素内的<a> 元素，在<div> 元素内调用event.preventDefault()事件处理程序来防止导航的默认操作，并调用$(this).parent().remove() 以删除设置.innerHTML 的动态创建的<div> 父元素

$(function() {
  var i = 0;

  $("#addNew").click(function() {
    i++;
    var maindiv = document.getElementById('nestedFeilds').innerHTML;
    $("#nestedFeilds :input").each(function() {
      var orignalname = $(this).attr('name');
      $(this).attr('name', orignalname.substring(0, orignalname.length - 1) + i);
    });
    $("#showhere").append(
      $("<div>", {"class":"field-parent", html:maindiv})
      .find("a").on("click", function(e) {
        e.preventDefault();
        $(this).parent(".field-parent").remove()
      }).end()
    );
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your Profile</label>
<div class="row" id="mainContainer">
  <div class="col-md-1 col-xs-4">
    <label for="Education">Education</label>
  </div>
  <div class="col-md-8 col-xs-8  verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
    <a href="" style="color: red;float:right; ">Delete Education</a>
    <input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name_0">
    <br>
    <input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name_0">
    <br>
    <input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name_0">
    <br>
    <div class="row">
      <div class="col-xs-3">
        <select class="form-control" id="YearName" style="float:left;" required="" name="first_year_name_0" value=''>
          <option value="2017">2017</option>
          <option value="2016">2016</option>
          <option value="2015">2015</option>
          <option value="2014">2014</option>
          <option value="2013">2013</option>
          <option value="2012">2012</option>
          <option value="2011">2011</option>
          <option value="2010">2010</option>
          <option value="2009">2009</option>
          <option value="2008">2008</option>
          <option value="2007">2007</option>
          <option value="2006">2006</option>
          <option value="2005">2005</option>
          <option value="2004">2004</option>
          <option value="2003">2003</option>
          <option value="2002">2002</option>
          <option value="2001">2001</option>
          <option value="2000">2000</option>
          <option value="1999">1999</option>
          <option value="1998">1998</option>
          <option value="1997">1997</option>
          <option value="1996">1996</option>
          <option value="1995">1995</option>
          <option value="1994">1994</option>
          <option value="1993">1993</option>
          <option value="1992">1992</option>
          <option value="1991">1991</option>
          <option value="1990">1990</option>
          <option value="1989">1989</option>
          <option value="1988">1988</option>
          <option value="1987">1987</option>
          <option value="1986">1986</option>
          <option value="1985">1985</option>
          <option value="1984">1984</option>
          <option value="1983">1983</option>
          <option value="1982">1982</option>
          <option value="1981">1981</option>
          <option value="1980">1980</option>
          <option value="1979">1979</option>
          <option value="1978">1978</option>
          <option value="1977">1977</option>
          <option value="1976">1976</option>
          <option value="1975">1975</option>
          <option value="1974">1974</option>
          <option value="1973">1973</option>
          <option value="1972">1972</option>
          <option value="1971">1971</option>
          <option value="1970">1970</option>
          <option value="1969">1969</option>
          <option value="1968">1968</option>
          <option value="1967">1967</option>
          <option value="1966">1966</option>
          <option value="1965">1965</option>
          <option value="1964">1964</option>
          <option value="1963">1963</option>
          <option value="1962">1962</option>
          <option value="1961">1961</option>
          <option value="1960">1960</option>
          <option value="1959">1959</option>
          <option value="1958">1958</option>
          <option value="1957">1957</option>
          <option value="1956">1956</option>
          <option value="1955">1955</option>
          <option value="1954">1954</option>
          <option value="1953">1953</option>
          <option value="1952">1952</option>
          <option value="1951">1951</option>
          <option value="1950">1950</option>
          <option value="1949">1949</option>
          <option value="1948">1948</option>
          <option value="1947">1947</option>
        </select>
      </div>
      <div class="col-xs-3">
        <select class="form-control" style="margin-left: -20px; float:left;" id="monthName" required="" name="first_Name_month_0" value=''>Select Month

          <option value='01'>January</option>
          <option value='02'>February</option>
          <option value='03'>March</option>
          <option value='04'>April</option>
          <option value='05'>May</option>
          <option value='06'>June</option>
          <option value='07'>July</option>
          <option value='08'>August</option>
          <option value='09'>September</option>
          <option value='10'>October</option>
          <option value='11'>November</option>
          <option value='12'>December</option>
        </select>
      </div>
      <div style="margin-left: -20px;float:left;">
        <p style="text-align: left; margin-top: 5px">&nbsp;to</p>
      </div>
      <div class="col-xs-3">
        <select class="form-control" id="YearName" style="margin-right:30px; float:left;" required="" name="second_year_name_0" value=''>Select Month

          <option value="2017">2017</option>
          <option value="2016">2016</option>
          <option value="2015">2015</option>
          <option value="2014">2014</option>
          <option value="2013">2013</option>
          <option value="2012">2012</option>
          <option value="2011">2011</option>
          <option value="2010">2010</option>
          <option value="2009">2009</option>
          <option value="2008">2008</option>
          <option value="2007">2007</option>
          <option value="2006">2006</option>
          <option value="2005">2005</option>
          <option value="2004">2004</option>
          <option value="2003">2003</option>
          <option value="2002">2002</option>
          <option value="2001">2001</option>
          <option value="2000">2000</option>
          <option value="1999">1999</option>
          <option value="1998">1998</option>
          <option value="1997">1997</option>
          <option value="1996">1996</option>
          <option value="1995">1995</option>
          <option value="1994">1994</option>
          <option value="1993">1993</option>
          <option value="1992">1992</option>
          <option value="1991">1991</option>
          <option value="1990">1990</option>
          <option value="1989">1989</option>
          <option value="1988">1988</option>
          <option value="1987">1987</option>
          <option value="1986">1986</option>
          <option value="1985">1985</option>
          <option value="1984">1984</option>
          <option value="1983">1983</option>
          <option value="1982">1982</option>
          <option value="1981">1981</option>
          <option value="1980">1980</option>
          <option value="1979">1979</option>
          <option value="1978">1978</option>
          <option value="1977">1977</option>
          <option value="1976">1976</option>
          <option value="1975">1975</option>
          <option value="1974">1974</option>
          <option value="1973">1973</option>
          <option value="1972">1972</option>
          <option value="1971">1971</option>
          <option value="1970">1970</option>
          <option value="1969">1969</option>
          <option value="1968">1968</option>
          <option value="1967">1967</option>
          <option value="1966">1966</option>
          <option value="1965">1965</option>
          <option value="1964">1964</option>
          <option value="1963">1963</option>
          <option value="1962">1962</option>
          <option value="1961">1961</option>
          <option value="1960">1960</option>
          <option value="1959">1959</option>
          <option value="1958">1958</option>
          <option value="1957">1957</option>
          <option value="1956">1956</option>
          <option value="1955">1955</option>
          <option value="1954">1954</option>
          <option value="1953">1953</option>
          <option value="1952">1952</option>
          <option value="1951">1951</option>
          <option value="1950">1950</option>
          <option value="1949">1949</option>
          <option value="1948">1948</option>
          <option value="1947">1947</option>
        </select>
      </div>
      <div class="col-xs-3">
        <select class="form-control" id="monthName" style="float:left; margin-left: -20px;" required="" name="Second__Name_month_0" value=''>Select Month

          <option value='01'>January</option>
          <option value='02'>February</option>
          <option value='03'>March</option>
          <option value='04'>April</option>
          <option value='05'>May</option>
          <option value='06'>June</option>
          <option value='07'>July</option>
          <option value='08'>August</option>
          <option value='09'>September</option>
          <option value='10'>October</option>
          <option value='11'>November</option>
          <option value='12'>December</option>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="row" id="2ndmainContainer">
  <div class="col-md-1 col-xs-4"></div>
  <div class="col-md-8 col-xs-8  verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
  <div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>

【讨论】：