3 回答

TA貢獻2065條經(jīng)驗 獲得超14個贊
在這段代碼中,你在這里犯了一個小錯字
$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
如果這是你想要獲取的按鈕,你可以檢查這個我已經(jīng)修復(fù)了你的錯字
$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>';
你應(yīng)該檢查這個querySelectorAll

TA貢獻1780條經(jīng)驗 獲得超5個贊
那是因為您是在運行時調(diào)用displayMessageModal()
,而不是在 AJAX 的承諾已解決時調(diào)用。一個可能的解決方案是:
返回來自的承諾
displayingFriends()
displayMessageModal()
在 promise 解決后調(diào)用
一個例子:
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());
});

TA貢獻2003條經(jīng)驗 獲得超2個贊
我猜你需要委托
您沒有發(fā)布足夠的 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>
添加回答
舉報