2

我想要做的，确切地说，是这样的：

<form>
    <input type="button" class="btn btn-warning" id="follow" value="Follow">  
</form>
<script type="text/javascript">

 $('#follow').click(function(){  
      $.ajax({ 
        url: '/follow'
        , type: 'POST'
        , cache: false
        , data: { user: '<%= username %>' }
        , complete: function() {


         },

        success: function(data) {

        },

        error: function() {

           console.log('process error');

        },
   });

   $('#follow').attr('value', 'Following');  
   $('#follow').attr('id', 'unfollow'); 
 });   

 $('#unfollow').click(function(){  
      $.ajax({ 
        url: '/unfollow'
        , type: 'POST'
        , cache: false
        , data: { user: '<%= username %>' }
        , complete: function() {


         },

        success: function(data) {


        },

        error: function() {

           console.log('process error');

        },
   });

   $('#follow').attr('value', 'Follow');  
   $('#follow').attr('id', 'follow'); 
 });           

</script>

第一个 post req 工作正常，但第二个 req 不行。当我按下按钮时，值不会改变，我也没有收到对应的 post req to /unfollow。这里有什么问题？

提前谢谢！

4

3 回答 3

2

您的事件绑定发生在第一次加载 DOM 时。当您动态更改 ID 时，不会导致绑定更改。你需要委托on()它才能工作。

$(".btn").on("click", "#follow", function() {...});
$(".btn").on("click", "#unfollow", function() {...});

另一种选择是不更改 ID。使用单个处理程序，并检查该值是否为 current"Follow"或"Unfollow"，并调用适当的 URL。

$("#follow").click(function () {
    if ($(this).val() == "Follow") {
        $(this).val("Unfollow");
        var url = "/follow";
    } else {
        $(this).val("Follow");
        var url = "/unfollow";
    }
    $.ajax( {
        url: url
        , type: 'POST'
        , cache: false
        , data: { user: '<%= username %>' }
        , complete: function() {
        },

        success: function(data) {
        },
        error: function() {
           console.log('process error');
        }
    });
});
于 2012-12-28T03:31:06.093 回答
0

Barmar 是正确的，但您也没有正确引用您的 ID。

在将其更改为 #unfollow 之后，您正在寻找 #follow :)

这是您要执行的操作的示例。

$(document).ready( function(){

   $("body").on("click", "#follow", function(){
      $(this).val("Unfollow");  
      $(this).attr("id","Unfollow"); 
   });

   $("body").on("click", "#Unfollow", function(){
      $(this).val("Follow");  
      $(this).attr("id","follow"); 
   }); 

});

这是在 Jsfiddle

于 2012-12-28T03:46:39.723 回答
0

更改 id 不是一个好主意。

您可以通过保持 id 相同并value在单击处理程序中测试来获得正确的效果，如下所示：

$('#follow').on('click', function(){
    if(this.value == 'Follow') {
        $.ajax({
            url: '/follow',
            type: 'POST',
            cache: false,
            data: { user: '<%= username %>' },
                complete: function() {
            },
            success: function(data) {
            },
            error: function() {
                console.log('process error');
            }
        });
        $(this).attr('value', 'Following'); 
    }
    else {
        $.ajax({ 
            url: '/unfollow',
            type: 'POST',
            cache: false,
            data: { user: '<%= username %>' },
            complete: function() {
            },
            success: function(data) {
            },
            error: function() {
                console.log('process error');
            }
        });
       $(this).attr('value', 'Follow'); 
    }
});

您可以简化为一个$.ajax()块，具体取决于成功/错误/完成功能的相似程度。

您可能还想在成功处理程序中移动更改#follow 值的语句。否则，按钮的值将至少在片刻内撒谎，如果发生 ajax 错误，则更长时间。

于 2012-12-28T04:00:34.847 回答