编辑：

Question

我正在寻求一些帮助，但主要是一个解释，所以我可以在将来避免这个问题。

我有一个使用AJAX调用的PHP脚本。该脚本的输出如下：

<div id="schedule_wrapper_all>
<div class="appointments">
    <div class="appt" value="2">
        <p class="c_name">William Davis</p>
        <div class="c_info" style="display: block;">
            <p class="c_street">230 N State Rd</p>
            <p class="c_city">Davison</p>
            <p class="c_time">11:00:00</p>
            <p class="c_phone">Phone 1: </p>
            <p class="c_phone_alt">Phone 2: </p>
        </div>
        <div class="c_functions" style="display: block;">
            <p><button type="button" class="view_notes">View Notes</button></p>
            <div class="d_view_notes" style="display: none;"></div>
            <p><button type="button" class="add_note">Add Note</button></p>
            <p><button type="button" class="reschedule">Reschedule</button></p>
            <p><button type="button" class="reassign">Reassign</button></p>
        </div>
    </div>
</div>
</div>

这是jQuery：

$('#schedule_wrapper_all').on('click', '.appointments .view_notes', function(e) {
        e.stopPropagation();
        var leadID = $(this).closest('.appt').attr('value');
        $.ajax({
            method: 'post',
            url: 'scripts/get_notes.php',
            data: {
                'leadID': leadID
            },
            success: function(data) {
//===========================PROBLEMATIC AREA=============================
                $('.d_view_notes').html(data);
                $('.d_view_notes').slideToggle();
//========================================================================
            }
        });//end ajax - Fill Notes

    });

get_notes.php：

<?php

include 'mysql_login_pdo.php';
include '../functions/db_functions.php';

$cond = array();
$params = array();

if ($_POST['leadID'] == '') {
    return;
}

if (isset($_POST['leadID']) && $_POST['leadID'] != '') {
    $leadID = $_POST['leadID'];
}
if (!empty($leadID)) {
    $cond[] = 'id_lead = ?';
    $params[] = "$leadID";
}

$query = "SELECT `leads_notes`.`message`, `leads_notes`.`created`, `status`.`status` FROM `leads_notes`,`status`";

if (count($cond)) {
    $query .= ' WHERE ' . implode(' AND ', $cond);
}
$query .= ' AND `status`.`id` = `leads_notes`.`id_status`';
$query .= ' ORDER BY `created` DESC';

//echo $query;
$stmt = $db->prepare($query);
$stmt->execute($params);

$notes = '';

foreach ($stmt->fetchAll(PDO::FETCH_OBJ) as $row) {
    $status = $row->status;
    $message = $row->message;
    $created = $row->created;

    $notes .= '<div class="notes">';
    $notes .= "<p>$status</p>";
    $notes .= "<p>$created</p>";
    $notes .= "<p class='note_text'>$message</p>";
    $notes .= '</div><br/>';
}
$db = null;
print $notes;

该脚本有效，除了由AJAX调用填充的data填充所有具有类'd_view_notes'的div，并且屏幕上有多个。我想要发生的是，当点击按钮时，它只填充所选'appt'div中包含的'd_view_notes'。

经过几个小时的尝试，我最接近正确的选择器是：

$(this).closest('.c_functions').children('.d_view_notes').html(data)

但是没有用。我不仅会欣赏正确的选择器，还会快速解释为什么我需要选择该选择器。谢谢！

如果您需要更多信息，我今天早上提出了类似的问题： jQuery - Simple "on('click')" Selector Issue

编辑：

我最后在'c_functions'div和一些jQuery中添加了一个按钮来测试'd_view_notes'的源代码：

   ...
    <p><button type="button" class="reassign">Reassign</button></p>
    <p><button type="button" id="view_source">Source</button></p>
    ...

和jQuery：

$('#schedule_wrapper_all').on('click', '.appointments #view_source', function(e) {
        e.stopPropagation();
        alert($(this).closest('#schedule_wrapper_all > .appointments > .appt > .c_functions').find('.d_view_notes').html());
    }); //This works, but only after the d_view_notes div is filled

一旦'd_view_notes'div填充了文本，jQuery就可以检测到最接近的'd_view_notes'html，并显示源代码。出于某种原因，我无法填充最接近的'd_view_notes'div而不是我以前的函数。

Answer 1

这个有用吗？

$(this).closest('.c_functions').find('.d_view_notes').html(data).slideToggle();

.closest('.c_functions')返回单击按钮的最近.c_functions个祖先，而.find('.d_view_notes')返回该元素的后代与类d_view_notes。此外，slideToggle()（正如您使用的那样）显示了元素（因为它目前有display: none）

Answer 2

据我所知，div并没有成功回调。（信用jakecigar）。我必须在AJAX调用之前捕获按钮（作为var），然后将'that'传递给'success'回调。

工作代码：

$('#schedule_wrapper_all').on('click', '.appointments .appt .view_notes', function(e) {
        e.stopImmediatePropagation();
        var leadID = $(this).closest('.appt').attr('value');
        var that = $(this).closest('#schedule_wrapper_all > .appointments > .appt > .c_functions').find('.d_view_notes');
        $.ajax({
            method: 'post',
            url: 'scripts/get_notes.php',
            data: {
                'leadID': leadID
            },
            success: function(data) {
                $(that).html(data).slideToggle();
            }
        });//end ajax - Fill Notes
    });

jQuery - AJAX之后的选择器

编辑：

2 个答案: