Question

我正在尝试使用JavaScript / jQuery通过instagram API来吸引instagram关注者。

有多个输入字段，每个输入字段都有其打开按钮，以获取关注者人数。我希望每个输入字段都与单击的按钮有关。

这是返回通过点击功能绑定的关注者计数的代码，但是由于某些原因，“点击甚至会在我第二次点击锚点/链接时触发。

function login_callback() {
    jQuery('.btn-instagram').click(function (e) {
        e.preventDefault();

        var $t = jQuery(this);
        var $prevFolw = jQuery(this).prev('instaFollowers').val();
        jQuery.ajax({
            url: 'https://api.instagram.com/v1/users/self',
            dataType: 'jsonp',
            type: 'GET',
            data: {
                access_token: accessToken
            },
            success: function (data) {
                var follows = data['data']['counts']['followed_by'];
                var link = data['data']['username'];

                alert($prevFolw);

            },
            error: function (data) {
                console.log(data);
            }
        });
    });
}

它应该在第一次单击时显示警报。

Answer 1

在第一次单击按钮之前没有click事件，而在第一次单击按钮之后没有事件，这就是为什么它在第二次单击时有效的原因。将.click()放在函数之外，并将login_callback()放在success或error函数中。

function login_callback(data) {
  if (data == 'error') {
    alert('Login error!');
  }
  else {
    alert(data); // $prevFolw
  }
}

jQuery('.btn-instagram').click(function(e) {
  e.preventDefault();

  var $t = jQuery(this);
  var $prevFolw = jQuery(this).prev('instaFollowers').val();
  jQuery.ajax({
    url: 'https://api.instagram.com/v1/users/self',
    dataType: 'jsonp',
    type: 'GET',
    data: {
      access_token: accessToken
    },
    success: function(data) {
      var follows = data['data']['counts']['followed_by'];
      var link = data['data']['username'];

      //alert($prevFolw);
      login_callback($prevFolw); // <-- the callback

    },
    error: function(data) {
      console.log(data);
      login_callback('error'); // <-- the callback
    }
  });
});

Answer 2

我将两个函数绑定到一个函数中，从而解决了这个问题。

        jQuery(document).ready(function(){

     jQuery(".btn-instagram").click(function () {
     $th = jQuery(this);
        authenticateInstagram(
            'YOUR_INSTAGRAM_ID', //instagram client ID
            'YOUR_URL', //instagram redirect URI


   function (){ jQuery.ajax({
      url: 'https://api.instagram.com/v1/users/self',
      dataType: 'jsonp',
      type: 'GET',
      data: {
        access_token: accessToken
      },
      success: function(data) {
        var follows = data['data']['counts']['followed_by'];
        var link = data['data']['username'];

   $th.parent('.instagram-row').find('.instaFollowers').val(follows);
   $th.parent('.instagram-row').find('.instaURL').val(link);

   console.log($th.parent('.instagram-row').find('.instaFollowers').val());
  console.log($th.parent('.instagram-row').find('.instaURL').val(link));

      },
       error: function(data) {
  console.log(data);
      }
  })
  }         );

        return true;

        })
             });

感谢大家的帮助。

仅当我单击链接/按钮两次时，函数的单击才会触发

2 个答案: