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

【问题标题】：Get data from selected option in <ul> using AJAX result使用 AJAX 结果从 <ul> 中的选定选项获取数据
【发布时间】：2018-08-18 11:49:56
【问题描述】：

我正在尝试从 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);
            }
        }
    }); 
});

谢谢你的帮助！！！

【问题讨论】：

标签： javascript jquery html ajax list.js

【解决方案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 列表的示例，该示例将适合您正在寻找的 ussign children() 函数

【讨论】：

工作！！！非常感谢您的参与。我肯定会读到e.target