JQuery On change, keyup not firing - javascript

I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.
however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?
detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
$(document).ready(function() {
$('#txt_detection').on('change, keyup', function(){
alert "oops!";
});
});
I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/
Any help gratefully received.

You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:
$(document).ready(function() {
$('#txt_detection').on('change keyup', function() {
alert("oops!");
});
});
Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.
jQuery($ => {
$('#txt_detection').on('input', function() {
console.log("oops!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">

What if your both concerns solves by single change event as follows,
Your jsfiddle doesnt have jquery library and your alert syntax was wrong.
$(document).ready(function() {
$('#txt_detection').on('input', function() {
alert("oops!");
});
});
Here is working jsfiddle.
Give it a try, this should work.
Document-ready Document

Related

Powertips on mouseover/enter for compatibility with DataTables?

I have Powertips in use on some objects in table cells inside of DataTables. The problem is, when you go to the next page, the tooltips stop working.
I found some threads saying use on mouseenter, but my table is dynamically generated and everytime I put the code into the .js, it doesn't work at all. I'm using regexp to select all the classes that start with "tt-". Here is the code I'm trying to get to work
$(document).ready(function() {
.on('mouseover', $('*[class*="tt-"]'), function(event) {
});
$('.tooltips').powerTip({
followMouse: true,
});
$('.tt-1').data('powertip', `DATA`);
});
I've tried putting the .tooltips and .tt-1 into the .on function, but it still doesn't work. The way I have the code above stops the tooltips from working anywhere, if I remove the .on function it the tooltips will work only on the first page.
I'm not familiar with regular expression in javascript. i've tried just using
[class*-"tt-"]
without the $('* and ') but it still doesn't work.
And I can't use ^= because it is called after the tooltips class so I have to use a regexp for if it contains this string.
Edit1
Changing
.on('mouseover', $('*[class*="tt-"]'), function(event) {
to
$(document).on('mouseover', $('*[class*="tt-"]'), function(event) {
and the final result being
$(document).on('mouseover', $('*[class*="tt-"]'), function(event) {
$('.tooltips').powerTip({
followMouse: true,
});
$('.tt-1').data('powertip', `DATA`);
});
Fixed the problem, thanks to john Smith :)
Edit2
So now it's not working anymore... I don't know what I changed.
if its the fix feel free to mark as answer ;)
use $(document).on( instead of .on(

jquery on change after ajax being called twice [duplicate]

I have a form with some input and select boxes, each has class="myClass". I also have the following script:
$(document).ready(function() {
$(".myClass").change(function() {
alert('bla');
})
});
I dont understand why after each change in select box or input box, this function is being called twice.
What's wrong here?
Appreciate your help!
All I can think of is that you used the same class on the form itself. if so, remove the myClass style from your form tag.
Corrected :
http://jsfiddle.net/rY6Gq/1/
Faulty one with double alert:
http://jsfiddle.net/rY6Gq/
e.stopImmediatePropagation(); is what worked for me.
$(document).ready(function() {
$(".myClass").change(function(e) {
e.stopImmediatePropagation();
alert('bla');
})
});
Its a bug,
You'd add
$("#some_id").unbind('change');
before any change call
It happens when the same class or whatever attribute you are binding also has the same name parent or child. Obviously, when you change a child, parent also gets changed (its child changes). If they have the same class or attribute, it should fire twice.
For example, in the following if you bind to "myClass", it will be called twice.
<div class="myclass">
<select class="myClass"> </select>
</div>
if this occurred in IE, it may be this bug as it was for me:
http://bugs.jquery.com/ticket/6593
updating to jQuery 1.7.1 worked for me.
For me - I had written the on change event inside a function.
Moving it to $(document).ready(function () {}); solved my case.
change like this
$(document).ready(function() {
$(".myClass").unbind('change');
$(".myClass").change(function() {
alert('bla');
})
});
It isn't: http://jsfiddle.net/nfcAS/
The only one that worked for me was unbind before the change check.
$(".select2Component").unbind();
$(".select2Component").change(function() {
//code
});
Try debugging the code in Firebug rather than alerting. It may be loosing the focus and returning it is causing the appearance of two changes when there isn't two happening

Why the jQuery remove is adding an extra element in the dropdown?

See this fiddle..
HTML:
<select>
<option>hey1</option>
<option>hey2</option>
<option>hey3</option>
<option>hey4</option>
<option>hey5</option>
</select>
jQuery:
$(document).ready(function () {
$('select').on('click',function(){
$("option:first",this).remove();
$(this).unbind('click');
});
});
When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.
Any ideas? pretty unexpected ..
EDIT:
This picture is for the ones who are not able to see any error..
Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:
$('select').one('mousedown',function(){
$("option:first",this).remove();
});
jsFiddle example
I'm pretty sure it's a bug, another fix is using focus event :
$('select').on('focus', function(){
$("option:first", this).remove();
$(this).unbind('focus');
});
fiddle: http://jsfiddle.net/F8E7L/

Set focus on appear

I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you
Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE
this should work:
<textarea autofocus></textarea>
Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});

jQuery dialog scripts for input val

I have a bit of a problem with a jQuery dialog and the way scripts are handled.
In the dialog html, I have
<input id="test">
If I do
<script type="text/javascript>
$('#test').val("haha")
</script>
after the input, it shows up. If I put it before, it doesn't work.
Now the problem is I'm trying to change the value of $('#test') using a click trigger, and I can't!
$('.testbutton').click(function() {
alert();
$('#test').val("haha");
});
The alert works, and the initial val replacement works, which means there aren't any duplicate or missing input areas.
The total script as it is now, not working:
<input type="button" class="testbutton" />
<input type="text" size="10" id="test" name="test" value="">
$('#test').val("currentvalue"); // This works
$('.testbutton').click(function() {
alert();
$('#test').val("haha");
});
Update
The dialog shows the correct value in #test once the dialog is closed and then reopened. Could this be something I'm missing?
Put your jQuery code into $(document).ready(function () {...your code...}). This will make it executed after browser creates DOM tree for your page. Otherwise javascript is not able to search/manipulate DOM elements correctly. It will look as following:
$(document).ready(function () {
$('.testbutton').click(function() {
$('#test').val("haha");
});
});
Update:
If your HTML code is loaded dynamically, then use live to bind event handler:
$(document).ready(function () {
$('.testbutton').live("click", function() {
$('#test').val("haha");
});
});
I guess you should wrap your code inside of a $(function() { //code here }); to make sure your code is run only when your DOM is ready.
The problem ended up being the # in test. For some reason the replacement works with a class identifier instead of a id identifier. I suppose it's because the # will replace only one instance, and for some reason that I have yet to discover, there is more than one instance of the dialog (or a hidden one).
Thanks for all your suggestions!

Categories