我无法使用来自 ajax 的数据属性选择所有元素

Question

我在使用 ajax 将事件从 javascript 添加到 php 时遇到问题。

session_start();

include "objects.php";

include "db.php";

$userId = $_SESSION['userId'];

$userName = $_SESSION['username'];

$html = '<h2 class="peopleHeader divSubContainer" id="peopleFriendsHeader" data-id ="peopleFriendsHeader" 

    data-target="peopleFriends" style="cursor:pointer" onclick=hideShowh2(this.getAttribute("data-id"),this.getAttribute("data-target"))>

    Friends <button id="refreshButton"><i class="fa fa-refresh" style="font-size:24px"></i></button></h2>';

    

$html .= '<ul class="peopleFriends" id="peopleFriends">';

$query = "select * from user_status where userId = " . $userId;

$selectingData = new selectingData($query, $conn);

$result = $selectingData->getResult();

if (count(json_decode($result[0]['friends'])) > 0) {

    foreach ($result as $r) {

        $allFriends = json_decode(strtolower(stripslashes($r['friends'])));

        foreach ($allFriends as $r2) {

            $query = 'select * from chatsystemuser where userName ="' . $r2 . '"';

            $selectingData = new selectingData($query, $conn);

            $result = $selectingData->getResult();

            foreach ($result as $r) {

                $html .= "<li><p>" . $r2 . "</p><button data-target-user= '".$r['id']."' id='friendsMessageButton" . $r['id'] . "' class='btn friendsMessageButton'>MESSAGE

                    </button></li>";

            }

        }

    }

} else {

    $html .= "<h2> NO FRIENDS </h2>";

}

$html .= "</ul>";

echo $html;

这是我的 javascript ajax，可以显示给浏览器。

function displayingFriends() {

    var friends = $('.listOfFriends');

    $.ajax({

        url: "include/friends.php",

        type: 'post',

        datatype: 'html',

        success: function (data) {

            friends.html(data);

        }

    })

}

我想使用数据属性选择所有按钮。对不起，我的英语不好，我不太擅长用英语交谈，但我能很好地理解它。

Answer 1

在这段代码中，你在这里犯了一个小错字$html&nbsp;.=&nbsp;"<li><p>"&nbsp;.&nbsp;$r2&nbsp;.&nbsp;"</p><button&nbsp;data-target-user=&nbsp;'".$r['id']."'&nbsp;id='friendsMessageButton"&nbsp;.&nbsp;$r['id']&nbsp;.&nbsp;"'&nbsp;class='btn&nbsp;friendsMessageButton'>MESSAGE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></li>";在你的代码中你没有使用data-target-modal所以它会返回 nAn 或 unidentified如果这是你想要获取的按钮，你可以检查这个我已经修复了你的错字$html&nbsp;.=&nbsp;'<li><p>'&nbsp;.&nbsp;$r2&nbsp;.&nbsp;'</p><button&nbsp;data-target-modal="#Modal-Name"&nbsp;data-target-user="'.$r['id'].'id="friendsMessageButton"'.&nbsp;$r['id']&nbsp;.'&nbsp;class="btn&nbsp;friendsMessageButton">MESSAGE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></li>';你应该检查这个querySelectorAll

Answer 2

那是因为您是在运行时调用displayMessageModal()，而不是在 AJAX 的承诺已解决时调用。一个可能的解决方案是：返回来自的承诺displayingFriends()displayMessageModal()在 promise 解决后调用一个例子：function displayingFriends() {&nbsp; &nbsp; var friends = $('.listOfFriends');&nbsp; &nbsp; // Return the promise here&nbsp; &nbsp; return $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: "include/friends.php",&nbsp; &nbsp; &nbsp; &nbsp; type: 'post',&nbsp; &nbsp; &nbsp; &nbsp; datatype: 'html',&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; friends.html(data);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}然后，您可以等待 promise 被解决：$(function () {&nbsp; &nbsp; displayingFriends().then(() => displayMessageModal());});

Answer 3

我猜你需要委托您没有发布足够的 HTML 来处理叠加层，我怀疑您代码中的 closest(".messages")这是一个开始$(function() {&nbsp; $("#peopleFriends").on("click", "[data-target-user]", function() {&nbsp; &nbsp; $(this).closest("li").find(".messages").toggleClass("active");&nbsp; })})div.messages {&nbsp; display: none;}div.active {&nbsp; display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><h2 class="peopleHeader divSubContainer" id="peopleFriendsHeader" data-id="peopleFriendsHeader" data-target="peopleFriends" style="cursor:pointer" onclick=hideShowh2(this.getAttribute( "data-id"),this.getAttribute( "data-target"))>Friends&nbsp; <button id="refreshButton"><i class="fa fa-refresh" style="font-size:24px"></i></button></h2><ul class="peopleFriends" id="peopleFriends">&nbsp; <li>&nbsp; &nbsp; <p>Fred</p><button data-target-user='Joe' id='friendsMessageButtonJoe' class='btn friendsMessageButton'>MESSAGE from Joe</button>&nbsp; &nbsp; <div class="messages">&nbsp; &nbsp; &nbsp; <p>Message 1</p>&nbsp; &nbsp; &nbsp; <p>Message 2</p>&nbsp; &nbsp; </div>&nbsp; </li>&nbsp; <li>&nbsp; &nbsp; <p>Fred</p><button data-target-user='Frank' id='friendsMessageButtonFrank' class='btn friendsMessageButton'>MESSAGE from Frank</button>&nbsp; &nbsp; <div class="messages">&nbsp; &nbsp; &nbsp; <p>Message 1</p>&nbsp; &nbsp; &nbsp; <p>Message 2</p>&nbsp; &nbsp; </div>&nbsp; </li></ul>