javascript - jQuery 使用append添加元素其中button标签无法生效-PHP中文网问答

1.jQuery 使用append添加元素其中button标签不会出现,点击按钮生成了一个tr和两个td标签,button标签不会出现.预计的是生成
<tr><td></td><td></td><button></button></tr>
实际效果是只生成了<tr><td></td><td></td></tr>,<button>没有生成

2.代码:

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>
  <p>
    <label>城市名称：<input id="aqi-city-input" type="text"></label><br>
    <label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
    <button id="add-btn">确认添加</button>
  </p>
  <table id="aqi-table">
  </table>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#add-btn").click(function () {
    var city = $("#aqi-city-input").val().trim() ;
    var num = $("#aqi-value-input").val().trim() ;
    var regex = /^[\u4e00-\u9fa5a-zA-Z\/\(\)]+$/;
    if (!regex.test(city)) {
      alert("请输入中文");
      $("#aqi-city-input").val() = "";
      $("#aqi-value-input").val() = "";
    }else{
      if ($("#aqi-table tr").length===0) {
      $("#aqi-table").append("<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>");
    }
    }
    //添加数据行
    $("#aqi-table").append("<tr><td>" + city + "</td><td>" + num + "</td><button>删除</button></tr>");
    $("#aqi-table button").click(function (event) {
      event.target.parentNode.remove();
    })
  })
})
</script>
</body>
</html>

全部回复(6)

高洛峰2017-04-11 09:47:18 6楼

一.清val

$("#aqi-city-input").val() = "";
$("#aqi-value-input").val() = "";

==>>

$("#aqi-city-input").val("");
$("#aqi-value-input").val("");

二.绑定事件

$(document).on("click","#aqi-table button", function (event) {
      event.target.parentNode.parentNode.remove()
    })

三. 添加数据行

 $("#aqi-table").append("<tr><td>" + city + "</td><td>" + num + "</td><td><button>删除</button></td></tr>");

赞 +0

添加回复

怪我咯2017-04-11 09:47:18 5楼

基础的事件委托

巴扎黑2017-04-11 09:47:18 4楼

jquery的val()不是这样用的
而是把值放在val("")中

伊谢尔伦2017-04-11 09:47:18 3楼

$("#aqi-table button").click(function(){
//
})

改成

$(document).on('click',"#aqi-table button",function(){
//
})

PHPz2017-04-11 09:47:18 2楼

楼主去了解一下事件委托，append的dom是无法绑定事件的，只能通过委托的形式绑定

大家讲道理2017-04-11 09:47:18 1楼

你需要在你的button外包一层td