JQuery function only works within a function

Asked
Active3 hr before
Viewed126 times

6 Answers

workswithinfunction
90%

By the way, jQuery does no magic here: It just registers your function to be called when DOMContentLoaded (or equivalent) event is triggered by the parsing and construction of the DOM tree.,I'm still new to jQuery and I'm wondering how come the jQuery functions called inside .ready() work just fine but not outside?,The ready function is executed when the dom tree has been created. You get an error in your second piece of code because the dom tree element with id filed1 has not been created yet, i.e. the page hasn't loaded yet.,Find centralized, trusted content and collaborate around the technologies you use most.

Since $(document).ready(..) is long and may be hard to remember, you can also use the short form $(onReadyFunction), i.e.

$(function() {
   $('#field1').click(function() {
      $('#result').load('/random_post #post');
   });
});
88%

Description: Relinquish jQuery's control of the $ variable.,Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.,Properties of jQuery Object Instances ,Create a different alias instead of jQuery to use in the rest of the script.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
   $.noConflict(); // Code that uses other library's $ can follow here.
</script>
load more v
72%

Why jquery function only works once in onchange? ,The idea: Every time i change the select option, it checks if my data-x property is == "y", If is, an alert Window shows the data-info asociated to this. This code works great until i try to print this data-info into a div called "result". After this, it only show me the result once, until i refresh my browser, then everything works again. How can i acomplish this? What im doing wrong?,You need to assign the value of data-info attribut of selected option to div

$(window).on('load', function() {
   $('select').change(function() {
      if ($(this).children('option:selected').data('x') == 'y') {
         alert($(this).children('option:selected').data('info'));
      }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required name="client_id" id="client_id" class="form-control selectpicker show-tick form-control" data-live-search="true" data-show-subtext="true">
   <option value="">-- NONE --</option>
   <option data-info="jUST tESTING" data-x="y" value="2" data-subtext="Santa Maria #1234">Antonio Perez</option>
   <option value="5" data-subtext="AV. Los Cerrillos 602, Chile - Santiago">Tatiana Gutierrez</option>
   <option data-info="aNOTHER tEST" data-x="y" value="6" data-subtext="xxxxxxxxxxxxxxxx">Ventas</option>
</select>
load more v
65%

Powered by Discourse, best viewed with JavaScript enabled,Solution 2 is where you declare the weekday variable, so that its scope is limited to only within that function itself.

Here’s my document.ready function:

$(document).ready(function() {
   // arrival day box is changed
   $('select#a_day').change(function() {
      alert('arrival day was changed to ' + $('.selday').val());
      var theyear = $('select#a_year').val();
      var themonth = $('select#a_month').val();
      var theday = $('select#a_day').val();
      alert(theday + '/' + themonth + '/' + theyear);
      dayofweek = weekday(theday, themonth, theyear);
      $('#dowtext').html(dayofweek);
      alert(dayofweek);
   });
});

and a couple of helper functions:

function calcweekday(adate) {
   var dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
   aweekday = adate.getDay();
   return dow[aweekday];
}

// onblur function:
function weekday(day, month, year) {
   adate = new Date(year, month - 1, day);
   if (adate) {
      weekday = calcweekday(adate);
      return weekday;
   }
}

The error I get is on this line:

dayofweek = weekday(theday, themonth, theyear);
load more v
75%

The task is to execute a series of functions sequentially in JavaScript. That is, execute function two ONLY after the first function has completed its execution.,Approach: This problem can be solved in multiple ways.,How to call functions after previous function is completed in jQuery ?,Example 1: In this example we will fix (hard-code) a callback function at the end of function one.

Syntax:

functionName();

Output:

In the console after clicking button:

Button clicked!
   First Function start
First Function end
Second Function start
Second Function end

Output:

In the console after clicking button:

Button clicked!
   First Function start
First Function end
Second Function start
Second Function end
load more v
40%

So for example, we talked about arrow functions (see arrow-function.html live, and see the source code) earlier in the article, which only work in the newest browsers:,Note: You can find our finished version at fetch-polyfill-finished.html (see also the source code).,The easiest way to give Babel a try is to use the online version, which allows you to enter your source code on the left, and outputs a transpiled version on the right.,Note: Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.

npm install - g jshint
load more v

Other "works-within" queries related to "JQuery function only works within a function"