Как работает функция click в jquery?

314
07 марта 2017, 15:49

Вот например, что делает вот эта?

$button.click(getImages.bind(null, $images, $query));

Насколько мне удалось убедиться, так после загрузки страницы "кнопка $button нажимается сама", проверяю так:

$button.click(getImages.bind(null, $images, $query),alert('Ку ку'));

Сразу окошко вылетает. А вот еще один прикол, перед этой строчкой объявляются переменные, такого формата:

$query = $('#squery').val();
$button = $('#search');
$getstr = $('.ctrl-middl');

Честно говоря, чего они такого формата ($ в начале, читал, что вроде как кешированные). Так вот $query это у меня поле, а $button это кнопка, по ее нажатию должно брать из поля vaue и записывать в $query, вот так:

$button.click($query = $('#squery').val(), getImages.bind(null, $images, $query));

Вместо этого, оно использует, только то значение которое записано в самом value поля. Причем если менять значение и жать кнопку, все равно остается старое. Извиняюсь, я просто не очень в js, поэтому это может быть вообще банальщина

Так у меня тут вообще "койдодыр":

$query = $('#squery').val(); 
$button = $('#search'); 
$getstr = $('.ctrl-middl'); 
 
$images = $('#image'); 
$videos = $('#video'); 
$descr = $('#descr'); 
$genre = $('#genre'); 
 
$button.click(getImages.bind(null, $images, $query)); 
 
function showImageSearchResult(result) { 
  for (var i = 0; i < 4; i++) { 
    $images.append(createThumbnail(result.items[i].snippet, result.items[i].link)); 
  } 
} 
 
function createThumbnail(snippet, link) { 
  $images.css('background-image', 'url(' + link + ')'); 
  return $images; 
} 
 
function getImages(imageContainer, query) { 
  imageContainer.empty(); 
  $.get( 
      "https://www.googleapis.com/customsearch/v1?", { 
        "q": query + " wallpaper", 
        "searchType": "image", 
        "imageSize": "large", 
        "key": "AIzaSyDQ7ablMI0Ee4kwu8h6IsYh82TuinT8Fy8", 
        "cx": "013005726503347959821:ejgclbwxiii" 
      }) 
    .done(showImageSearchResult) 
    .fail(function() { 
      imageContainer.html('<p class="err">Не удалось вывести изображения, попробуйте позже.</p>'); 
    }); 
}
@import url('https://fonts.googleapis.com/css?family=Play'); 
* { 
  font-family: 'Play', sans-serif; 
  box-sizing: border-box 
} 
 
:root { 
  --color-1: #888; 
  --color-2: #aaa; 
  --color-3: #ddd; 
  --color-4: #eee; 
  --color-5: #ffaa2f; 
} 
 
body { 
  margin: 0; 
  padding: 0 
} 
 
 
/*-----------------------*/ 
 
main { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  background: var(--color-4); 
} 
 
header { 
  position: relative; 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 10%; 
  border-bottom: 1px solid var(--color-1); 
  z-index: 2; 
} 
 
input { 
  padding: 0 2vh 
} 
 
input:hover { 
  background: var(--color-3) 
} 
 
textarea { 
  resize: none; 
  padding: 2vh 
} 
 
textarea, 
input { 
  position: absolute; 
  color: var(--color-1); 
  border: 0; 
  outline: 0; 
  font-size: 3vw; 
  transition: .5s; 
} 
 
input::-webkit-input-placeholder { 
  color: var(--color-1); 
  transition: .5s 
} 
 
input::-moz-placeholder { 
  color: var(--color-1); 
  transition: .5s 
} 
 
input:hover::-webkit-input-placeholder { 
  color: var(--color-2) 
} 
 
input:hover::-moz-placeholder { 
  color: var(--color-2) 
} 
 
#squery { 
  height: 100%; 
  width: 70%; 
  left: 0; 
  background: var(--color-3); 
  border-right: 1px solid var(--color-1); 
} 
 
#search { 
  height: 100%; 
  width: 30%; 
  right: 0; 
  background: var(--color-2); 
  color: var(--color-4); 
  border-left: 1px solid var(--color-1); 
  text-transform: uppercase; 
  cursor: pointer; 
  background-size: 50% 50%; 
  background-position: right; 
  background-repeat: no-repeat; 
} 
 
#search:hover { 
  background: var(--color-5); 
  color: var(--color-1) 
} 
 
 
/*-----------------------*/ 
 
section { 
  width: 100%; 
  height: 30%; 
  position: relative; 
  z-index: 2; 
} 
 
section div { 
  position: absolute; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  border-top: 1px solid var(--color-1); 
  border-bottom: 1px solid var(--color-1); 
  background: var(--color-4); 
} 
 
section div input { 
  width: 100%; 
  height: 20%; 
  top: 0; 
  font-size: 2vw; 
  border-bottom: 1px solid var(--color-1); 
  background-size: 50% 50%; 
  background-position: right; 
  background-repeat: no-repeat; 
} 
 
section div textarea { 
  width: 100%; 
  height: 80%; 
  bottom: 0; 
  font-size: 1vw; 
  border-top: 1px solid var(--color-1); 
  background-size: 50% 50%; 
  background-position: center; 
  background-repeat: no-repeat; 
} 
 
#image { 
  width: 30%; 
  left: 0; 
  border-right: 1px solid var(--color-1); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
} 
 
#video { 
  width: 40%; 
  left: 30%; 
  right: 30%; 
  border-left: 1px solid var(--color-1); 
  border-right: 1px solid var(--color-1); 
  background-size: 50% 50%; 
  background-position: center; 
  background-repeat: no-repeat; 
} 
 
#artcl { 
  width: 30%; 
  right: 0; 
  border-left: 1px solid var(--color-1); 
} 
 
 
/*-----------------------*/ 
 
#result { 
  width: 90%; 
  height: 50%; 
  right: 0; 
  font-size: 1vw; 
  border-top: 1px solid var(--color-1); 
  background-size: 50% 50%; 
  background-position: center; 
  background-repeat: no-repeat; 
  z-index: 0; 
} 
 
 
/*-----------------------*/ 
 
#control { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  bottom: 0; 
  left: 0; 
  transition: .5s; 
  pointer-events: none; 
  z-index: 1; 
} 
 
#control div { 
  position: absolute; 
  background: var(--color-3); 
  pointer-events: auto; 
  transition: .5s; 
} 
 
#control .ctrl-left { 
  width: 10%; 
  height: 60%; 
  left: 0; 
  bottom: 0; 
  border-right: 2px solid var(--color-1); 
  border-top: 1px solid var(--color-1); 
} 
 
#control .ctrl-bott { 
  width: 100%; 
  height: 10%; 
  bottom: 0; 
  border-top: 2px solid var(--color-1); 
} 
 
#control .ctrl-middl { 
  width: 10%; 
  height: 10%; 
  left: 0; 
  bottom: 0; 
  background: var(--color-5); 
  cursor: pointer; 
  border-right: 2px solid var(--color-1); 
  border-top: 2px solid var(--color-1); 
  z-index: 2; 
  background-size: 50% 50%; 
  background-position: center; 
  background-repeat: no-repeat; 
} 
 
#control .ctrl-middl:hover { 
  background: var(--color-2); 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>SimpleGrabber</title> 
  <link rel="stylesheet" href="css/reset.min.css"> 
  <script src="js/prefixfree.min.js"></script> 
</head> 
 
<body> 
  <main> 
    <header> 
      <input id="squery" type="text" value="cat" autocomplete="off" placeholder="Введите запрос..."> 
      <input id="search" type="button" value="Найти"> 
    </header> 
    <section> 
      <div id="image"></div> 
      <div id="video"></div> 
      <div id="artcl"> 
        <input id="genre" type="text" valu="" placeholder="Жанры"> 
        <textarea id="descr"></textarea> 
      </div> 
    </section> 
    <textarea id="result"></textarea> 
    <div id="control"> 
      <div class="ctrl-left"></div> 
      <div class="ctrl-middl"></div> 
      <div class="ctrl-bott"></div> 
    </div> 
  </main> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</body> 
 
</html>

Плюс еще и мои правки.

На самом деле, мне просто нужен скрипт, что бы по запросу в поле, выдавал:

  1. Случайную картинку из Googl'a
  2. Случайный ролик с YouTub'a
  3. И краткое описание, спарсенное со стороннего сайта

Пока, только картинку загружает нормально, а парсер выдает весь код указанной страницы, и чего-то не могу достучаться до парсенных элементов.

var parse;
$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});
$.get(
    'https://game-shop.com.ua/category/igryi-dlya-playstation-4',
    function(response) {
      parse = response;
      return parse;
    });
$('.ctrl-middl').on('click', function() {
    $('#result').html(parse);
    alert('parsed ok!');
});
Answer 1

.сlick() работает в 3 вариантах:

.click( handler ) // вешается обработчик события
.click( eventData , handler ) // вешается обработчик события, и в него передаются данные
.click() // эмулируется нажатие

handler - это обработчик события. Теперь поставьте себя на место JS.

Он знает, что в click может быть передано 0, 1 или 2 аргумента. Если как в первом случае передается один, значит, там должен быть handler - обработчик события, те ссылка на функцию. А там функция. JS выполняет эту функцию, ожидая, что результатом выполнения функции будет ссылка на функцию. Т.е getImages.bind возвращает обработчик события.

Теперь второй пример, вы добавили алерт. Это значит, что вместо .click( handler ), будет такой вариант функции: .click( eventData , handler ). И JS теперь слепо выполняет alert пытаясь получить от него обработчик события, которого уже нет

Что касаемо $ в начале переменной - это бред. От названия переменных ничего не зависит. Но многие любят ставить $, чтобы обозначить, что переменная содержит jQuery-объект

READ ALSO
Печать всего содержимого тега table
jQuery

Печать всего содержимого тега table

Есть кнопка

 366
Фон со звездами. Градиентом
CSS

Фон со звездами. Градиентом

Всем здравствуйте

 252
Внутренняя тень градиентом
CSS

Внутренняя тень градиентом

Здравствуйте!

 387
Внутрення круговая тень градиентом
CSS

Внутрення круговая тень градиентом

Всем привет! Я недавно задавал, как сделать наклонную внутреннюю тень

 272