Develop Reference

jQuery input change doesn't work

I'm trying to make something like a shopping cart, but just with an order form.
I am using this pattern to fire input changes, but it doesn't work in my case.
Here what I have first.
<div class="ingrid__table-row">
<div class="ingrid__table-data ingrid__table-item">Lemon</div>
<div class="ingrid__table-data ingrid__table-weight">15g</div>
<div class="ingrid__table-data ingrid__table-price">10</div>
</div>
With jQuery, on click, I take the data from ingrid__table-data and add to the suitable input into .order__container.
Then, on the same click, a number input is appended, which will enable to choose the quantity of the selected products.
$('.order__container').append(`<input class="bul-order-info__input bul-order-info__qnt" type="number" name="Quantity" min="1" value="1">`)
And it appears on a webpage in the order form.
I need to detect the value changes of "number type input" and fire other events.
But the input changes are not detected, although if I create the same input element manually in HTML document, these changes are detected perfectly as it's shown here
How can I achieve this behavior?

My best guess based on the info you provided is that you are trying to attach the on change event to the dynamically created inputs on this way:
$('.bul-order-info__input').change( function () {...} );
But with the code before you are aren't applying those changes to any input because none of them exists when you are creating the event handlers, so you have to bind the events to an existing element like this:
$(document).on('change', '.bul-order-info__input', function() {...});
The element doesn't have to be always document, but I tend to use it, because is the only one that always will be present. However, something like this is also valid:
$('.order__container').on('change', '.bul-order-info__input', function() {...});

How to change text based on textarea length

I added the following code, and I am getting the text to update, but only when clicking outside of the textarea.
$('.form__input-el').change(function() {
$('.form__character-indicator').text($('.form__input-el').val().length);
})
Why is this happening and how can I make it update without clicking outside of the textarea?

you you can use keyup if you want to get change the output immediately
$('.form__input-el').keyup(function() {
$('.form__character-indicator').text($('.form__input-el').val().length);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form__input-el"></textarea>
<div class="form__character-indicator"></div>

Try with input instead of change this will trigger everytime the user inputs something.

according to jQuery docs: For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus
This is why your event appears only on leaving the textareas focus.
https://api.jquery.com/change/
a complete list of the events can be found here:
https://api.jquery.com/category/events/
so you need to use another event, maybe like:
https://api.jquery.com/keydown/

Use a keyup event to update your character count while the user is typing
Try something like this
$('.textarea').on('keyup', function() {
var newCount = $(this).val().length
$('.count').html(newCount)
})
Here is a jsfiddle

onChange event not firing when input changed dynamically

On my form, I have a DropDown, when a value is selected, I fire some JavaScript that populates some visible <input type="text" /> fields (under neath the drop down).
The problem is, I also want to run some JavaScript function whenever the value of one of these inputs changes, I want this function to run even if the text input is changed by the drop down selection.
Here is my current code:
jQuery(document).ready(function() {
$('#mainPane').on('change', '#formElementFromEmail', function(event){
var collectFromDropDown = $('#formElementFromEmail');
persistHiddenInputForCollectFromValue();
});
});
I suspect the change event is not being fired because no one has manually changed the value of the field in question. How can I overcome this?

Since you're using jQuery, you can trigger the event:
$('#mainPane').trigger('change');

you can simulate change event by
var element = document.getElementById('formElementFromEmail');
element.onchange();

Jquery Chosen - Prevents capture of keypress

I have a div (id = div_search_fields) within which I have several jQuery Chosen dropdowns. Attached to the div I have a keypress capture listener which, if the key pressed is the Enter key, submits the selected stuff by clicking a hidden submit button.
$("#div_search_fields").keypress(function(e) {
if (e.which == 13) {
$("#hiddenSubmitButton").click();
}
});
For some reason this listener is never called if I have just selected an option in one of the chosen dropdowns. Within the "div_search_fields" DIV I also have a simple text input box and if I have just entered text there and then press the Enter key, the listener is triggered as expected.
This must be something to do with focus on the Chosen dropdowns but I cannot fathom why? Any ideas?

As Far I can see Jquery chosen is using e.preventDefault() in keypress event so it is not allowing to execute your code. There should be some function which you can override to achieve your goal or you can get ride of e.preventDefault().

Two things:
If the input in the dropdowns is generated dynamically AFTER the keypress event is bound, the event won't be bound to those elements.
IDs should be unique to one element. Use a class instead if you want to bind an action to multiple elements.
Use .on() instead:
$(".div_search_fields").on("keypress", function(e) { . . . });

jQuery/Javascript - How to fire an event when a button's value is changed?

I am working on a plugin for jQuery that will essentially style certain elements. Like jqTransform I could just replace the element but I chose to position the real element off screen and make a new element thats styled. This allows triggering the actual events of the real element. Also, if an onclick handler or onchange handler for a textbox is there, jqTransform will not include that whereas this way, it will include it.
Here is my problem. Say a user has a button. Later on in the app the user decides to change the value of the button. It will change the original button's value but not the styled button. Is there any way I can connect the elements so that if the original button's value is changed the styled button's value is changed as well?

you can catch any property change on object using onpropertychanged event.
$("#buttonid").bind('propertychange', function(e) {
if (e.originalEvent.propertyName == "value") {
// value is changed, handle it here
}
});