Щелчок моей функции срабатывает только при двойном нажатии на ссылку / кнопку

Question

Я пытаюсь подсчитать число подписчиков Instagram через API Instagram, используя JavaScript / jQuery.

Есть несколько полей ввода, каждое из которых имеет кнопку включения, чтобы получить количество подписчиков.Я хочу, чтобы каждое поле ввода было заполнено относительно нажатой кнопки.

Вот код, который возвращает количество подписчиков, которое я связываю с функцией щелчка, но по некоторым причинам «щелчок» срабатывает только тогда, когда я нажимаю ссылку / ссылку во второй раз.

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

Я решил это самостоятельно, связав обе функции в одну.

        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;

        })
             });

Спасибо всем за помощь.

Answer 2

До первого нажатия у ваших кнопок нет события 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
    }
  });
});