For example, what does this one do?

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

As far as I was able to make sure, after loading the page, the $ button button is pressed by itself, I check this:

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

Immediately the window crashes. And here's another joke, before this line variables are declared, of this format:

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

Honestly, what are they of such a format ($ at the beginning, I read that it seems to be cached). So $ query is my field, and $ button is a button, when pressed, it should take vaue from the field and write to $ query, like this:

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

Instead, it uses only the value that is written in the value field itself. And if you change the value and press the button, it still remains the old. I'm sorry, I'm just not very js, so it can be a trivial thing.

So I have here a "kododyr":

 $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>

Plus my edits.

Actually, I just need a script, so that I would give out a request in the field:

  1. Random image from Googl'a
  2. Random video from YouTub'a
  3. And a brief description, sparsenno from a third-party site

So far, only the image loads normally, and the parser issues all the code for the specified page, and I can’t get through to the parsed elements.

 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!'); });
  • $button.disappear;alert('Ку ку') - And this is how the button disappears on the page load. Immediately the window crashes. - vp_arth
  • What exactly is your question? - vp_arth
  • one
    In short: you misunderstood everything at all and the code was written incorrectly - andreymal
  • Can you help fix this code? Choose the right method? - KRIVA

1 answer 1

.сlick() works in 3 options:

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

handler is an event handler. Now put yourself in JS.

He knows that 0, 1, or 2 arguments can be passed to the click . If, as in the first case, one is passed, then there must be a handler - an event handler, the function reference. And there is a function. JS performs this function, expecting that the result of the function will be a reference to the function. Ie, getImages.bind returns an event handler.

Now the second example, you added an alert. This means that instead of .click( handler ) , there will be a variant of the function: .click( eventData , handler ) . And JS now blindly performs an alert trying to get an event handler from it, which is no longer there.

With regards to $ at the beginning of the variable - this is nonsense. Nothing depends on the variable name. But many people like to put $ to indicate that the variable contains a jQuery object

  • I don’t know what getImages.bind returns, but I don’t think it's a function. - we can assume that the function is Grundy
  • bind does not perform the function, so the $button.click(getImages.bind(null, $images, $query)) line $button.click(getImages.bind(null, $images, $query)) is quite correct. In this case, the parameters are simply set. That is, when the function getImages(imageContainer, query) { handler is triggered function getImages(imageContainer, query) { parameters will be filled with $ images and $ query respectively. Since bind does not perform the function, your options will break the expected behavior, since the getImages function will not be executed - Grundy
  • @Grundy setup did not know. Changed the answer - Crantisz
  • How can I make $ query change in getImages.bind? unbind do? as? - KRIVA
  • @KRIVA, why are you doing bind at all? and what does change mean? - Grundy