使用 AJAX 结果从 <ul> 中的选定选项获取数据

Question

我正在尝试从 AJAX 结果中的所选 li 中获取数据，但我想不出从当前选择中获取数据的方法，可以帮助我吗？

获取注册表的整个过程运行良好，单击 AJAX 生成的选项也正常工作，唯一我不能做的是获取客户端当前选择的记录...

我在模板中的列表

<div class="col-xs-12" >
  <ul class="list list-search-address" id="target_ul">
     <li>
        <h3 class="addressStreet">Test</h3>
        <p class="neighborhoodStreet">Test</p>
     </li>
  </ul>
</div>

我的AJAX请求

$('#sendSearchAddress').click(function() {
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "https://***-api.herokuapp.com/api/***-street-last-three-searcheds?access_token=****FH",
        success: function (finalData) {
            // Running test
            console.log(finalData);

            if (finalData) {
                // var dd = JSON.parse(result);
                // addressStreet(finalData[0].addressStreet)
                // name: finalData[0].addressStreet

                // Print Results
                var options = {
                    valueNames: ['addressStreet', 'neighborhoodStreet']
                };

                // Example One
                var values = finalData.map(function(finalDatum) {
                    return {
                        addressStreet: finalDatum.addressStreet,
                        neighborhoodStreet: finalDatum.neighborhoodStreet,
                    };
                });

                var userList = new List('users', options, values);

                $('#target_ul').on('click', 'li', function () {
                    alert('Clicked in ');
                });

                // Example Two
                // userList.add(values);

                // Print Varible Contain Data From Street
                console.log(values);
            }
        }
    }); 
});

感谢帮助！！！

Answer 1

可以对ul内的N个li使用事件委托，将点击事件设置为ul内的所有li。

  let app = document.getElementById('target_ul');

// attach event listener to whole container
app.addEventListener('click', function(e) {
  if (e.target && e.target.nodeName === 'LI') {
    let item = e.target;
    alert('you clicked on item: ' + item.innerHTML);
  }
});

here is a short sample of event delegation and 2 more good stuff

导航 e.target 以查看您的案例中的内容它可以是 e.target.nodeName 您将看到节点数组并在示例中使用 innerHTML 您可以理解这个想法。 ..

在jQuery

 $('#target_ul').on('click', 'li', function (e) {
                alert('Clicked in ', e);
            });

您可能可以导航 e 参数并找到节点，执行 e.target

e.target in jquery 在这里您会找到一个带有 ul 列表的示例，该示例将适合您正在寻找的 usign children() 函数

使用 AJAX 结果从 <ul> 中的选定选项获取数据

Get data from selected option in <ul> using AJAX result

html

javascript

ajax

jquery

list.js