jQuery 点击事件在将事件绑定到页面文档 DOM 后附加后仍不起作用

Question

I currently have a add button that adds some text and also a remove button that removes the added text.我目前有一个添加按钮，可以添加一些文本，还有一个删除按钮，可以删除添加的文本。 The issue I'm having is once I click the remove button, the add button no longer works.我遇到的问题是，单击删除按钮后，添加按钮不再起作用。 I know i can only bind events to things that are in the original DOM so I've tried binding the click event to the document DOM but that hasn't worked.我知道我只能将事件绑定到原始 DOM 中的东西，所以我尝试将点击事件绑定到文档 DOM，但没有奏效。 Any help would be much appreciated.任何帮助将非常感激。

JS Fiddle JS小提琴

HTML: 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: 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();
    })
}

Answer 1

You appended wrong data, my friend.你附加了错误的数据，我的朋友。 Here is the result.这是结果。

https://jsfiddle.net/3fx6n4o8/1/ 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>');
      });
    });

Hope to help:))希望有所帮助:))

jQuery 点击事件在将事件绑定到页面文档 DOM 后附加后仍不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-21 10:39:34

jQuery 点击事件在将事件绑定到页面文档 DOM 后附加后仍不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-21 10:39:34

解决方案1
1 已采纳 2020-07-21 10:39:34