从嵌入式按钮点击获取选定项

Question

我有这个ul控件：

 <ul id="AddedWifiList"></ul>

I add a li item using jquery:

 $("#AddedWifiList").append('<li><a href="#">' + connectionName +
      '</a> <input type="button" onClick="DeleteWifi();" class="btn btn-  danger btn-sm btn-sm" value="Delete"></li>');

上次尝试呈现的标记是：

<input type="button" onclick="DeleteWifi(Informed);" class="btn btn-  danger btn-sm btn-sm" value="Delete">

错误信息：

Error: Uncaught ReferenceError: Informed is not defined Script: https://192.168.0.4/Account/Settings Line: 1

我的JS函数：

function DeleteWifi() {
    var connectionName = $('#AddedWifiList').val();
    alert(connectionName);
}

警告值为空。

我尝试过这样做：

 $("#AddedWifiList").append('<li><a href="#">' + connectionName +
      '</a> <input type="button" onClick="DeleteWifi(' + connectionName + ');" class="btn btn-  danger btn-sm btn-sm" value="Delete"></li>');


function DeleteWifi(connectionName) {
    alert(connectionName);
}

解析错误会导致程序出现错误。

- Andrew Simpson

---

在最后一个例子中，什么是解析错误？ - cYrixmorten

Answer 1

问题是因为 ul 元素没有 value 属性可读。从您代码的上下文来看，似乎您正在尝试获取 connectionName 值，这应该在按钮上设置。

此外，请注意，由于您在页面加载后动态添加元素，因此应使用委派事件处理程序而不是内联事件处理程序，因为后者已过时，不再是好的实践方法。要读取与按钮相关的 connectionName 的值，然后可以使用 data 属性。

有了这些说法，尝试这样做：

$('button').on('click', function() {
  var connectionName = 'connection_' + new Date().getTime();
  $("#AddedWifiList").append('<li><a href="#">' + connectionName + '</a><button type="button" class="btn btn-danger btn-sm btn-sm delete" data-connection-name="' + connectionName + '">Delete</button></li>');
});

$('#AddedWifiList').on('click', '.delete', function() {
  console.log('Removing ' + $(this).data('connection-name'));
  $(this).closest('li').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<button type="button">Add</button>
<ul id="AddedWifiList"></ul>

- Rory McCrossan

Answer 2

以下是您的代码：- https://jsfiddle.net/obnoxiousnerd/ec9um5qz/10/

$("#AddedWifiList").append('<li><a href="#" id="Wifi">' + 'connectionName' +
      '</a> <button>Delete</button></li>');
$("button").click(function(){
      var connectionName = document.getElementById("Wifi").textContent;
    alert(connectionName);
});

做了一些更改，但完成了。

- Pranav

---

你需要选择一些有值的元素来读取。由于你的 ul 没有任何可读内容，我将其更改为添加的 a 元素，然后哇！它就可以工作了。 - Pranav

是的，但我打字有点慢，所以他超过了我。（pipped在这里的意思可能是“超过”或“击败”） - Pranav

谢谢。你刚被另一个人抢先了。它确实有效。 - Andrew Simpson