jquery - 从嵌入式按钮单击获取选定的项目

Question

我有这个 ul 控件:

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

我使用 jquery 添加一个 li 项目:

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

带有解析错误的错误。

Answer 1

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

另请注意，当您在页面加载后动态附加元素时，您应该使用委托(delegate)事件处理程序而不是内联事件处理程序，因为后者已经过时并且不再是使用的好习惯。要读取与按钮相关的 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>