文章/答案/技术大牛

发布

社区首页 >问答首页 >将绑定事件附加到页面文档DOM后，jQuery单击事件不起作用

问将绑定事件附加到页面文档DOM后，jQuery单击事件不起作用
EN

Stack Overflow用户

提问于 2020-07-21 16:45:03

回答 1查看 33关注 0票数 1

我目前有一个添加按钮，用于添加一些文本，还有一个删除按钮，用于删除添加的文本。我遇到的问题是，一旦我单击了删除按钮，添加按钮就不再起作用。我知道我只能将事件绑定到原始DOM中的内容，所以我尝试将click事件绑定到文档DOM，但没有成功。任何帮助都将不胜感激。

JS Fiddle

HTML：

<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="testjavascript.js"></script>

<button id='hideshow'>Hide/Show Methodology</button>

<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
  <option value="Pipe_crack">Pipe Crack</option>
  <option value="Slip Lining">Slip Lining</option>
  <option value="Directional_drill">Directional Drill</option>
  <option value="open_cut">Open Cut</option>
  <option value="lift_relay">Lift & Relay</option>
  <option value="other_meth">Other</option>
</select>

<br>

<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
  <option value="Nature Strip">Nature Strip</option>
  <option value="Road">Road</option>
  <option value="n/s_rd">Nature Strip & Road</option>
</select>


<form>
  <label for="meters">Number of Meters:</label>
  <input type="number" id="ren_meter" name="ren_meter">
</form>
</div>

<button id="save_meth" onclick="append_methodology()">Add Methodology</button>

<div id="meth_append">


</div>


</div>
</html>

Javascript：

$(document).ready(function(){
    $('#hideshow').click(function(){
        $('#methodology').toggle();
    });
});

function append_methodology() {
    var ren_met=document.getElementById("ren_meter").value
    var ren_loc=document.getElementById("location").value
    var ren_meth=document.getElementById("constr_method").value
    $(document).on('click','#save_meth',function(){
        $("#meth_append").append('<div>'+ren_meth,ren_loc,'<br>'+ren_met,'<button id="removeButton" onclick="remove()">Remove</button></div>')
    })
}

function remove() {
    $("#meth_append").on('click','#removeButton',function(){
        $(this).closest('div').remove();
    })
}

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-21 18:39:34

你添加了错误的数据，我的朋友。结果如下所示。

https://jsfiddle.net/3fx6n4o8/1/

$(document).ready(function() {
      $('#hideshow').click(function() {
        $('#methodology').toggle();
      });
      
      $('#save_meth').on('click', function() {
      
        var ren_met = document.getElementById("ren_meter").value;
        var ren_loc = document.getElementById("location").value;
        var ren_meth = document.getElementById("constr_method").value;
        $("#meth_append").append('<div>' + ren_meth + '<br>' + ren_loc + '<br>' + ren_met + '<button class="removeButton" onclick="remove()">Remove</button></div>');
      });
    });

希望能帮上忙：)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63010751

复制

相似问题

问将绑定事件附加到页面文档DOM后，jQuery单击事件不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将绑定事件附加到页面文档DOM后，jQuery单击事件不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将绑定事件附加到页面文档DOM后，jQuery单击事件不起作用
EN