jQuery 點擊事件在將事件綁定到頁面文檔 DOM 后附加后仍不起作用

Question

我目前有一個添加按鈕，可以添加一些文本，還有一個刪除按鈕，可以刪除添加的文本。 我遇到的問題是，單擊刪除按鈕后，添加按鈕不再起作用。 我知道我只能將事件綁定到原始 DOM 中的東西，所以我嘗試將點擊事件綁定到文檔 DOM，但沒有奏效。 任何幫助將非常感激。

JS小提琴

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

Answer 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>');
      });
    });

希望有所幫助:))

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