jQuery / PHP赞/不喜欢按钮 - php

我正在尝试创建一个简单的“喜欢/不喜欢”按钮来更新数据库。 jQuery代码在外部文件中。 PHP变量是从Codeigniter中的控制器发送的。

页面刷新后,它将正确显示当前登录的用户是否能够“赞”或“与他们正在查看的用户不同”。如果他们单击一次,一切都会正常进行-按钮在“喜欢” /“不同”之间切换,喜欢的次数增加或减少,并且数据库被更新。再次单击时,它将重新加载整个页面,但不会更新数据库-如何停止刷新并使其在不重新加载页面的情况下进行更新?

PHP:

<div id="like_button">

<p><a href=""><span id="like_unlike" class="link"><?php if($already_liked){echo "Unlike";}else{echo"Like";}?></span></a> (<span id="number_of_likes"><?php echo $number_of_likes; ?></span>)</p>

<span id="liked_unliked_user_id" style="display:none"><?php echo $liked_unliked_user_id; ?></span>
<span id="liking_unliking_user_id" style="display:none"><?php echo $liking_unliking_user_id; ?></span>

</div>

jQuery:

$( function() {

$( '#like_button a' ).click( function( e ) {

  var thisrecord = $( this ).closest( "div" );

  var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
  var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
  var like_unlike = thisrecord.find( "#like_unlike" ).html();


  if (like_unlike == 'Like') 
  {
    $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
    var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
    thisrecord.find( "span#number_of_likes" ).html( likes );
    $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
  }
  else
  {
    $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
    var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
    thisrecord.find( "span#number_of_likes" ).html( likes );
    $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
  }

  e.preventDefault();
});
});

参考方案

当您第一次创建.click()事件时,jQuery选择器会找到所有'#like_button a'元素并将此事件附加到它们。当使用#like_button a替换$(this).replaceWith(...)元素时,此新元素没有附加.click()事件,因为原始选择器仅运行一次以附加事件(当时该元素不存在)。

在您的代码中,该页面会重新加载,因为您单击的是直接链接回当前页面的链接-您的.click()函数用e.preventDefault()阻止的事件。

如果您命名该函数,然后在替换对象后重新附加.click()事件,则该函数将正常运行:

$( function() {
    function toggleLike(e)
    {
        var thisrecord = $( this ).closest( "div" );

        var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
        var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
        var like_unlike = thisrecord.find( "#like_unlike" ).html();


        if (like_unlike == 'Like') 
        {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        } else {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        }

        e.preventDefault();
    }

    $( '#like_button a' ).click(toggleLike);
});

jQuery-PHP类选择器问题 - php

所以我有这样的事情:<?php foreach($post_array as $post): ?> <div class="postBodyWrapper"> <div class="vid-link"> <script type="text/javascript&#…

jQuery Ajax加载仅适用于单个单词变量 - php

在我的PHP文件中,我将一些变量从输入框传递到链接中,该链接通过jQuery的ajax load函数在其URL中使用该变量加载页面。整个系统运行良好,但仅适用于单字变量。每当涉及到空格时,我的Ajax通话都会中断。我假设这是一个编码问题,但是我也有一些疑问。基本上,它归结为我的PHP文件中的这一行代码,这导致了混乱。是否有可能找出格式是否正确,或者为什么在多…

jQuery-找不到Ajax网址 - php

好的,我敢肯定这确实很容易,而且我很愚蠢,但是似乎并不能深入了解它。我试图从我的js文件“ custom.js”中对“ helpers.php”中的某些代码进行简单的AJAX调用。但是,我仍然收到404错误,因为我似乎并没有正确遍历文件夹,尽管我确信我正在...我的文件夹结构如下:html index.php js/ custom.js includes h…

jQuery ajax()返回json对象,但未正确警告 - php

为什么无法使用data [0] .id返回ID? $(document).ready(function(){ $.ajax({ type: 'POST', dataType: "json", url: '<?php echo matry::base_to('tests/map_it'…

jQuery / Ajax请求被发送两次 - php

我已经一遍又一遍地扫描我的代码,但似乎找不到问题。当我单击链接#add-user-btn时,文件actions.php被调用了两次(因此PHP脚本执行了两次)。这是脚本:我想它与ajax请求前面的javascript有关吗?$(function () { $("#add-user-btn").click(function (e) { e.…