jQuery works in console but not in .js file

Question

$('ul#test a').click(function(){
 $('this').closest('parent').find('textarea').val(this.getAttribute('href'));   
});

works in Google Chrome snippet but not loaded with Tampermonkey.
I think that it's trying to set a value before even finding the target

(edit) whole script :

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        www.reddit.com/r/some-subreddit
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  $( "textarea" ).one("click",(function() {
    $(".usertext-edit").prepend ( `
    <div id="gmSomeID"><ul id="gmSomeeID"><a href="#stickers1"</a> <a href="#stickers2"</a> <a href="#stickers3"</a> <a href="#stickers4"</a> <a href="#stickers5"</a ><a href="#stickers6"</a> <a href="#stickers7"</a> <a href="#stickers1"</a> <a href="#stickers2"</a> <a href="#stickers3"</a> <a href="#stickers4"</a> <a href="#stickers5"</a> <a href="#stickers6"</a>
</ul></div>
    ` );
    $('ul#gmSomeeID').css({
      'overflow-y':'scroll',
      'display':'block',
      'overflow-wrap' : 'normal',
      'height':'100px',
      'background-color':'white'
    });

    $('ul#gmSomeeID a').click(function(){
      $("this").closest("div.usertext-edit")
        .find("textarea")
        .val($("this")
        .closest("div.usertext-edit")
        .find("textarea")
        .val() +' '+ '[](' + this.getAttribute('href') + ') ');
    });
  }));
})();

It displays some pictures above textarea's and I'm trying to make it insert them in the said textarea when they're clicked on

Please post the minimal code necessary (HTML, CSS, JavaScript) for us to replicate your issue. — Scott Marcus, Nov 09 '17 at 22:20
In regards to the people who are saying put it in a document ready, I thought tampermonkey scripts run after the page is created? — Taplar, Nov 09 '17 at 22:27

Zakaria Acharki · Accepted Answer · 2017-11-09T22:31:54.367

Put your code inside ready function so the event will find the element in your selector since it will be executed just after the full load of the DOM :

$(function(){
   //Your code here
})

Try also the event delegation :

$(function(){
    $('body').on('click', '#test a', function(){
        $(this).closest('parent').find('textarea').val( $(this).attr('href') );
    });  
});

NOTE 1: The code works in the console because the DOM was fully loaded. NOTE 2: The $('this') should be $(this) instead & it will be better to use $(this).attr('href') rather than this.getAttribute('href').

Hope this helps.

Scott Marcus · Answer 2 · 2017-11-09T22:36:54.340

When you try the code in the console, the DOM is already done being built. If you have the code as you've shown it, before all of the HTML in the file, it will try to find the elements before the elements have been parsed into memory.

Place your code inside of a document.ready handler:

$(function(){
  $('ul#test a').click(function(){
   $('this').closest('parent').find('textarea').val(this.getAttribute('href')); 
  });
});

jQuery works in console but not in .js file

2 Answers2

Linked