无法获取变量传递给jQuery

Question

我的网站上有保存功能，以便用户可以保存项目。 第一次单击它会更新并保存得很好，因为它经过了PHP文件，但是我遇到的问题是第二次单击时使ajax更新了链接，因为该链接是在jquery代码中创建的，用于使用AJAX。 （通过正确的ID是问题所在），应将心脏更新为红色或绿色，并添加或删除“保存”一词。 我需要在第二，第三等点击上更新正确的ID。 这是jquery代码：我有2个函数。 saveLink和deleteLink。

这是我的JavaScript文件：

$(document).on("click", '.del-button', function () {
var savId = $(this).attr('data-sav-id');
deleteLink(savId);
});

$(document).on("click", '.sav-button', function () {
    var delId = $(this).attr('data-del-id');
    saveLink(delId);
});

function saveLink( saveID ){

var id = saveID;

$.ajax({
    method: "POST",
    url: "saveLink.php",
    dataType: "json",
    data:  { 

        'id' : id,

    },

    success: function(returnID){
        var returnID = $.trim(returnID);
        if(returnID){           

            $('#showSaved' + id).html('<span id="removeSaved('+ id +');"><a href="javascript:void();" class="del-button pull-right"' + 'data-sav-id='+ returnID +'"><i class="fa fa-heart" style="color:#d52917;"></i></a></span>');    

        }
    }
});
}

function deleteLink( deleteID ){

var deletedID = deleteID;

$.ajax({
    method: "POST",
    url: "deleteLink.php",
    dataType: "json",
    data:  { 

        'deletedID' : deletedID,

    },

    success: function(deleteIDFunc){
        var deleteIDFunc = $.trim(deleteIDFunc);
        if(deleteIDFunc){   

            $('#removeSaved' + deletedID).html('<span id="showSaved('+ deletedID +');"><a href="javascript:void();" class="sav-button pull-"' + 'data-del-id='+ deleteIDFunc + '">Save <i class="fa fa-heart"></i></a></span>');

        }
        else {
            alert('Your saved post was not removed. Please try again');
        }
    }
});
}

这是处理初始点击的PHP代码：

$query = "SELECT        
        count(replies.reply_topic) as replyCount,
        topics.topic_id,
        topics.topic_subject,
        topics.topic_date,
        topics.topic_cat,
        topics.topic_creator,
        topics.topic_likes,
        users.user_id,
        users.username,
        profile.profile_id,
        profile.profile_pictureMain,
        profile.profile_users,
        savelink.saveLink_id,
        savelink.saveUser_id,
        savelink.link_id
        FROM
            topics
        LEFT JOIN
            users
        ON
            topics.topic_creator = users.user_id
        LEFT JOIN
            replies
        ON
            replies.reply_topic = topics.topic_id
        LEFT JOIN
            profile
        ON
            profile.profile_users = users.user_id
        LEFT JOIN
            savelink
        ON
            savelink.link_id = topics.topic_id
        GROUP BY
            topics.topic_id
        ORDER BY
            topics.topic_date DESC 
        LIMIT ?, ?
        ";

$stmt = $conn->prepare($query);
$stmt->bindParam(1, $start, PDO::PARAM_INT);
$stmt->bindParam(2, $limit, PDO::PARAM_INT);
$stmt->execute();
$returnAmt = $stmt->fetchAll();
if($stmt->rowCount() > 0){
$returnValues = "";
foreach($returnAmt as $row){
    $returnValues .=
if(isset($_SESSION['user_session']) && $row['saveUser_id'] == $_SESSION['user_session']){
        $returnValues .= '<span id="removeSaved'.$row['saveLink_id'].'"><a href="javascript:void();" class="del-button pull-right" data-sav-id="'.$row['saveLink_id'].'"><i class="fa fa-heart" style="color:#d52917;"></i></a></span>';
    }
    else if(isset($_SESSION['user_session'])){
        $returnValues .= '<span id="showSaved'.$row['topic_id'].'"><a href="javascript:void();" class="sav-button pull-right" data-del-id="'.$row['topic_id'].'">Save <i class="fa fa-heart"></i></a></span>';
    }
    else{
        $returnValues .= '<a href="javascript:void();" class="pull-right" data-toggle="modal" data-target="#loginModal" >Save <i class="fa fa-heart"></i></a>';
    }

    $returnValues .= '</div></div></span></div>
}
echo $returnValues;

这是用于显示结果的html代码：

<div role="tabpanel" class="tab-pane active" id="Top">

    <div id="rowDisplayResults">

        <!--Display results here-->

    </div>

</div>

这就是我想要的保存功能。 保存时为红色的心，未保存时为绿色。

我是否应该在保存和删除链接函数中添加另一个变量，以便在第二次单击后传递正确的ID？ 任何帮助将非常感激。 谢谢。

Answer 1

像这样更改您的代码。 同时更改此逻辑的html

  $(document).on("click", '.del-button', function () { var savId = $(this).attr('data-sav-id'); deleteLink(savId); }); $(document).on("click", '.sav-button', function () { var delId = $(this).attr('data-del-id'); saveLink(delId); }); function saveLink( saveID ){ var id = saveID; $.ajax({ method: "POST", url: "saveLink.php", dataType: "json", data: { 'id' : id, }, success: function(returnID){ var returnID = $.trim(returnID); if(returnID){ $('#showSaved' + id).html('<span id="removeSaved('+ id +');"><a href="javascript:void();" class="del-button pull-right"'+ ' data-sav-id=' + returnID + '"><i class="fa fa-heart" style="color:#d52917;"></i></a></span>'); //onclick="deleteLink('+ returnID +'); } } }); } function deleteLink(deleteID) { var deletedID = deleteID; $.ajax({ method: "POST", url: "deleteLink.php", dataType: "json", data: { 'deletedID': deletedID, }, success: function (deleteIDFunc) { var deleteIDFunc = $.trim(deleteIDFunc); if (deleteIDFunc) { $('#removeSaved' + deletedID).html('<span id="showSaved(' + deletedID + ');"><a href="javascript:void();" '+ 'class="pull-right sav-button" data-del-id=' + deleteIDFunc + '">Save <i class="fa fa-heart"></i></a></span>'); } //onclick="saveLink(' + deleteIDFunc + '); else { alert('Your saved post was not removed. Please try again'); } } }); }