jquery .on('change' is not triggering while other events do - javascript

I dinamically add an input box in a table cell. The HTML I add is:
cell.html('<input type="text" id="finder" data-type="cittaNascita" value="'+value+'">');
The input is dinamically added so I then added:
$(document).on('change','#finder',function(){
console.log('cerco altra citta');
});
but I never see the message in console.
This code works fine anyway:
$(document).on('keyup','#finder',function(){
console.log('cerco altra citta');
});
so I expect it to be something related to .on('change', but even looking on SO my code should be working fine. What do I miss here?

You can use .on('input' event instead to fire the change event without actually leaving the input, it fires right after the value has changed.

Related

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() {...});

force a change event on an DOM element without actually changing it

Summary: I am trying to force a change event to fire on an HTML element, without actually changing it, but the event does not seem to fire.
My scenario: There is a page (created by someone else) that is designed to hide certain fields until a value from a certain dropdown is selected, at which time the dependent fields will appear. But in some scenarios, the dropdown should be autopopulated and fields should appear by default. So I am trying to trick the page into showing the dependent fields when it is first loaded. I do something like this:
form.field('THEDROPDOWNFIELD').$el.trigger('change');
But nothing happens. I found that
form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');
will fire the change event. For whatever reason, $el.trigger('change') does not trigger the change unless the DOM element's value truly has changed. The problem is I don't want the dummy value in that dropdown to be there.
Summary (again): Is there a way to force the dropdown's element change event to fire when the selected value in the dropdown has not actually changed?
This snippet works ok (uses JQuery):
$('#toChange').bind('change', function() {
$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="toChange">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>
Your code doesn't seem to be failing, so it must be something related to the DOM or the way the other guy has implemented this effect. It is hard to guess what your problem might be. So my suggestion is as follows:
Check if its really implemented to trigger on radiobutton change and not on a click event handler on a div/other element that's not directly related to the radio button.
Check if your HTML code is failing.
Provide more code snippets that you think might be related.

jQuery .val() doesn´t make a 'change'

I have problems testing my JavaScript. A part of my test looks like
$('#activityType').val("33");
$('#favorite').click();
The $('#activityType') is a select field and I want to select the option with value "33". Now I expected, that this would be a change, so that my function in my program like
$('body').on('change', '.item-select', function() {
var itemRow = $(this).parent().parent();
changeBookableItemInputFields(itemRow);
});
will be executed.
The $('#activityType') has got the class-attribute item-select, so I don´t understand, why $('#activityType').val("33"); is no change. I changed the value and the css-attribute is there. The body should be able to find it and the function should be executed.
Can anybody tell me, why it doesn´t work?
Changing a value with JavaScript does not trigger the events, you need to manually fire it. jQuery makes that easy with .trigger(eventName)
$('#activityType').val("33").trigger("change");
Use trigger() for calling any event using program.
change event is for user types into the input.
You can manually call the any event event using after setting the value:
$('#activityType').trigger("change");

How to initialize form additions for jquery methods?

I've got a form where I'm trying to do the sort of thing you often see with tags: there's a textfield for the first tag, and, if you put something into it, a new and similar textfield appears to receive another tag. And so on. I've gotten the basics of this working by setting up a jQuery .blur() handler for the textfield: after the value is entered and the user leaves the field, the handler runs and inserts the new field into the form. The handler is pretty vanilla, something like:
$('input.the_field_class').blur(function () { ... });
where .the_field_class identifies the input field(s) that collect the values.
My problem is that, while the new textfield is happily added to the form after the user enters the first value, the blur handler doesn't fire when the user enters something into the newly-added field and then leaves it. The first field continues to work properly, but the second one never works. FWIW, I've watched for and avoided any id and name clashes between the initial and added fields. I had thought that jQuery would pick up the added textfield, which has the same class markings as the first one, and handle it like the original one, but maybe I'm wrong -- do I need to poke the page or some part of it with some sort of jQuery initialization thing? Thanks!
Without seeing your code in more of its context, it's hard to know for sure, but my best guess is that you're attaching a handler to the first field, but there is no code that gets called to attach it to the new field. If that's the case, you have a few options, two of which are:
1) In your blur() handler, include code to attach the blur handler to the newly created field.
2) Use jQuery's event delegation to attach a handler to the field container, and listen for blur events on any field in the container:
<div class="tag-container">
<input class="the_field_class" /> <!-- initial tag field -->
</div>
<script>
var $tagContainer = $('.tag-container');
var createNewField = function() {
$tagContainer.append($('<input class="the_field_class" />');
};
$tagContainer.on('blur', 'input.the_field_class', createNewField());
</script>
Which is better will depend on your use case, but I'd guess that the 2nd option will be better for you, since you're unlikely to be dealing with tons of blur events coming from the container.

jQuery: generate Select element

I have a table with data, and when I click on a cell in a certain column, I want it to change into a select dropdown for the user to choose a category for that row (which will be written to the database by AJAX but that'll come later).
I've done something similar before with text boxes using this, which works great, but I'm not sure if I'm modifying it correctly.
I've created a JSFiddle which shows the problem I'm having. I click on the text and it turns into a select element as expected, but when I click on that to choose an option, the dropdown doesn't stay open and I can't select anything. Debugging has shown me that when I click the dropdown, it runs the $("td.ChooseType").click() routine again so I've tried to suppress that by removing the class then adding it back on on selection, but that hasn't solved it. On the rare occasion that the dropdown stays open, I am unable to select anything by either mouse or keyboard.
All of the users will be on IE8 unfortunately, so I need it to be compatible with that.
Thanks!
You need to use event delegation, as otherwise that click event is always bound to that td - regardless of whether its class changes.
Simply change:
$("td.ChooseType").click(function() {
To:
$("table").on('click', '.ChooseType', function () {
JSFiddle demo.
Purely as an alternative to the accepted answer, you can remove an attached handler with unbind. So instead of adding and removing the class, you could unbind and rebind your handler. Only requirement is that the function can't be in-line, but has to be declared separately.
example: http://jsbin.com/qiqunici/1/edit
var handler = function () {
$(this).unbind('click', handler); //unbind the clicked element only
//create and change the element
//inside the select-change event, instead of addClass, re-attach:
{
//$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
$(this).parent().click(handler).text(selected).find('select').remove();
}
};
$("td.ChooseType").click(handler);

Categories

Resources