Javascript - $(this).on

Question

Why it can retrieve the "modelValue" when inputText changed ? Who can describe the flow of this script ? Thanks

//js預載入
$(document).ready(function() {
  console.log("ready!");
  var iepValues = $('body').find('[model-value]');
  $.each(iepValues, function() {
    var modelValue = $(this).attr('model-value');
    console.log("display");
    //Why it can retrive the "modelValue" when inputText chagned ?
    $(this).on('change', function() {
      console.log("modelValue:" + modelValue);
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>

  TEST1:
  <input type="text" id="TxtTest1" model-value="A">TEST2:
  <input type="text" id="TxtTest2" model-value="B">

</body>

i dont see any problem. it gets the value of the input as it should be — guradio, Feb 04 '16 at 09:07
To guradio, thank u for your answer. I want to know how it works. To Adil, thank u for your helping To NiallMitch, Yes — Urala, Feb 04 '16 at 09:16
You shouldn't use nonstandard attribute names like `model-value`. If you need your own attributes, use `data-XXX`, like `data-model-value="A"`. — Barmar, Feb 04 '16 at 09:18

score 0 · Accepted Answer · edited May 23 '17 at 12:23

Why it can retrieve the "modelValue" when inputText changed ?

Because the function hooked up with $(this).on('change', function() { ... }); is called when the value of the input changes, and that function closes over (has access to) the modelValue variable in context where it was created.

Who can describe the flow of this script ?

It calls jQuery's ready function, passing in a function to call when the DOM is ready. All of the rest of the code is in that callback.
When the DOM is ready, jQuery calls the callback.
The code logs "ready!" and the finds all elements inside body that have a model-value attribute. [Side Note: $('body').find('[model-value]') can more concisely and efficiently be written $('body [model-value]').]
The code loops through all of those elements using $.each, calling a callback function for each of them.
Inside that callback, the code grabs the value of the model-value attribute and stores it in a variable. There will be a different variable for each of the elements, each variable contained by the context of the call to the callback from $.each.
Code in each of those callbacks hooks up a handler for the change event of that element.
The handler responds to the change event by logging the value of the modelValue variable.

Recommended reading:

If the element's model-value attribute is going to change, that code will log the value it had when the DOM was ready, not the value it has when the value of the input changes. That would seem to be the point of the code.

If the model-value attribute doesn't change, then the code is unnecessarily complicated, and could just be:

$(document).ready(function() {
  console.log("ready!");
  $('body [model-value]').on('change', function() {
    console.log("modelValue:" + $(this).attr('model-value'));
  });
});

Or even:

console.log("ready!");
$('body [model-value]').on('change', function() {
  console.log("modelValue:" + $(this).attr('model-value'));
});

If you move the script tag to the bottom of the HTML, just before the closing </body> tag.

But again, that's if the model-value attribute doesn't change, or if you want to see the changed value instead of the original value. The original code will show you the original, not changed, value of the attribute.

Javascript - $(this).on

1 Answers1