Javascript AJAX调用后未执行JS_Javascript_Php

Javascript AJAX调用后未执行JS

javascript php

Javascript AJAX调用后未执行JS,javascript,php,Javascript,Php,我正在开发一个小型天气应用程序。在前端，我有一个搜索栏，每当用户键入内容时，我都会加载一个城市列表，该列表与用户输入的值相匹配，并按人口排序，限制为10 这个功能现在正在发挥作用：一个ul的li城市正在生成现在看来我的app.js被AJAX锁定了，我试图为每一个li元素onclick添加一个事件监听器，但它根本不执行。似乎这是由于异步/同步造成的 index.php fetch.php 从我看到的情况来看，您之前正在调用addEventListener。cities select exists

我正在开发一个小型天气应用程序。在前端，我有一个搜索栏，每当用户键入内容时，我都会加载一个城市列表，该列表与用户输入的值相匹配，并按人口排序，限制为10

这个功能现在正在发挥作用：一个ul的li城市正在生成

现在看来我的app.js被AJAX锁定了，我试图为每一个li元素onclick添加一个事件监听器，但它根本不执行。似乎这是由于异步/同步造成的

index.php

fetch.php

从我看到的情况来看，您之前正在调用addEventListener。cities select exists加载页面->尝试循环。cities select但它不存在。设置.innerHTML后，需要在$.Ajaxsuccess函数中添加事件侦听器

const search=document.querySelectorcity-search； const results=document.querySelector.result； //工作 search.addEventListenerkeyup，e=>{ 让城市=搜索.value；如果城市！={ 负荷城市化； } }; //工作 const loadCities=城市=>{ $.ajax{ url:config/fetch-cities.php，方法：获取， async:true，数据：{ 查询：城市 }, 成功：functiondata{ results.innerHTML=数据； const cities=document.queryselectoral.cities-select； cities.forEachcity=>{ city.addEventListenerclick，e=>{ console.loghello世界； } } } }; }

浏览器是否已冻结，即选项卡崩溃，大多数浏览器都会询问您是否要终止相关脚本，还是代码根本不执行？这是一种巨大的差异。@James你想迭代什么？$。ajax不会返回loadCities任何可以迭代的内容。我会将我的问题改为“代码根本不执行”浏览器是否冻结，即选项卡崩溃，大多数浏览器会询问您是否要终止相关脚本，或者代码根本不执行？这是一种巨大的差异。@James你想迭代什么？$。ajax不会返回到loadCities，也不会返回任何可以迭代的内容

<body>
    <?php require_once("config/db.php")?>
    <h2>Weather</h2>
    <input type="text" name="city-search" class="city-search" id="city-search">
    <ul class="result f32">
  ...
</ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="scripts/app.js"></script>
</body>

const search = document.querySelector("#city-search");
const results = document.querySelector(".result");
const listCities = document.querySelectorAll(".cities-select");


// works
search.addEventListener("keyup", e =>{
    let city = search.value;
    if(city != ""){
        loadCities(city);
    }
});


// works
const loadCities = (city) => {
    $.ajax({
        url: "config/fetch-cities.php",
        method: "GET",
        async: true,
        data: {
            query: city
        },
        success: function(data){
            results.innerHTML = data;
        }
    });
}

// does not execute 
listCities.forEach(city => {
    city.addEventListener("click", e =>{
        console.log("hello world");
    })
})

<?php 
require("db.php");

if(isset($_GET["query"])){
    $search = $_GET["query"];
    $results = $conn->prepare("SELECT * FROM cities WHERE city LIKE '{$search}%' 
    ORDER BY population DESC LIMIT 5");
} 

$results->execute();
foreach ($results as $row) {
    echo '<li class="cities-select">
     <div> '.$row["city"].' </div>
     <div> '.$row["country"].' </div>
     </li>';
}
?>