我无法使用来自 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 .= "<li><p>" . $r2 . "</p><button data-target-user= '".$r['id']."' id='friendsMessageButton" . $r['id'] . "' class='btn friendsMessageButton'>MESSAGE
                </button></li>";

在你的代码中你没有使用data-target-modal所以它会返回 nAn 或 unidentified

如果这是你想要获取的按钮，你可以检查这个我已经修复了你的错字

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

你应该检查这个querySelectorAll

Answer 2

那是因为您是在运行时调用displayMessageModal()，而不是在 AJAX 的承诺已解决时调用。一个可能的解决方案是：

1. 返回来自的承诺displayingFriends()

2. displayMessageModal()在 promise 解决后调用

一个例子：

function displayingFriends() {

    var friends = $('.listOfFriends');

    // Return the promise here

    return $.ajax({

        url: "include/friends.php",

        type: 'post',

        datatype: 'html',

        success: function (data) {

            friends.html(data);

        }

    })

}

然后，您可以等待 promise 被解决：

$(function () {

    displayingFriends().then(() => displayMessageModal());

});

Answer 3

我猜你需要委托

您没有发布足够的 HTML 来处理叠加层，我怀疑您代码中的 closest(".messages")

这是一个开始

$(function() {

  $("#peopleFriends").on("click", "[data-target-user]", function() {

    $(this).closest("li").find(".messages").toggleClass("active");

  })

})

div.messages {

  display: none;

}

div.active {

  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

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

</h2>

<ul class="peopleFriends" id="peopleFriends">

  <li>

    <p>Fred</p><button data-target-user='Joe' id='friendsMessageButtonJoe' class='btn friendsMessageButton'>MESSAGE from Joe</button>

    <div class="messages">

      <p>Message 1</p>

      <p>Message 2</p>

    </div>

  </li>

  <li>

    <p>Fred</p><button data-target-user='Frank' id='friendsMessageButtonFrank' class='btn friendsMessageButton'>MESSAGE from Frank</button>

    <div class="messages">

      <p>Message 1</p>

      <p>Message 2</p>

    </div>

  </li>

</ul>