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>

最初の投稿要件は完全に機能しますが、2 番目の要件は機能しません。ボタンを押しても値が変化せず、必要な特派員のポストが届きません/unfollow。ここで何が問題なのですか？

よろしくお願いします！

4

3 に答える 3

2

イベント バインディングは、DOM が最初に読み込まれたときに発生します。ID を動的に変更しても、バインディングは変更されません。これを機能させるには、委任する必要がありますon()。

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

もう 1 つのオプションは、ID を変更しないことです。単一のハンドラーを使用して、値が現在"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を変更するのは得策ではありません。

valueID を同じに保ち、次のように 1 回のクリック ハンドラー内でテストすることで、正しい効果を得ることができます。

$('#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()成功/エラー/完了関数がどれだけ似ているかに応じて、1 つのブロックに単純化できる場合があります。

#follow の値を変更するステートメントを成功ハンドラー内に移動することもできます。そうしないと、ボタンの値は、少なくともしばらくの間、または ajax エラーが発生した場合はそれ以上の間、嘘をつくことになります。

于 2012-12-28T04:00:34.847 に答える