javascript - 使用 AJAX 结果从 中选定的选项获取数据

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使用事件委托(delegate)，为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 列表的示例，该示例将适合您正在寻找的使用 child() 函数