I'm trying to monitor for any changes in a textarea:
<textarea id="log-box__data"></textarea>
Changes are made to the textarea exclusively via jQuery append:
$(document).on('click', '#myBtn', function(e) {
$('#log-box__data').append('someText' + '\n');
});
What event is fired whenever something is append[ed] to the textarea?
And, if there isn't one, how can I monitor for this change?
Things I've Tried:
$(document).on('input change keyup paste', '#log-box__data', function() {
alert( "foobar" );
});
None of those events fire when #myBtn is clicked.
Using trigger function after append will help
$(document).on('click', '#myBtn', function(e) {
$('#log-box__data').append('someText' + '\n');
$('#log-box__data').trigger("change");
});
$('#log-box__data').on('change', function(e) {
alert( "foobar" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="log-box__data"></textarea><br />
<button id="myBtn">add text</button>
append is not a good idea and also set a value will never call the onchange event so try below code to trigger manually
$("#myBtn").bind("click",function(){
$("#log-box__data").val("yourtexthere").trigger('change');
});
Related
Currently I have the following code for autosizing my textarea:
$('textarea').bind('input propertychange', function() {
$(this).height(50).height(Math.min(370, this.scrollHeight));
});
This works fine while I am in the textarea and change the text by pressing some keys.
What I need is a possibility to do the same when setting the text of the area by JavaScript and while the textarea is not focused. Only executing the same code in the callback (ofcourse with right scope) doesn't works - height gets zero.
after executing your callback function fire the propertychange function
$('textarea').trigger('propertychange');
with a change and a trigger
$("#i").on('change', function(){
this.style.color = 'red';
});
function f(){
$('#i').trigger('change');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i" value="hello" /><br>
<button onclick="f()">Run</button>
my jquery solution is :
$(document).ready(function(){
$("textarea").each(function(){
$(this).height(($(this)[0].scrollHeight) + "px");
});
$("textarea").keypress(function(){
$(this).height(($(this)[0].scrollHeight) + "px");
});
})
JSFiddle
You may try to trigger the event
$('textarea').on('input propertychange', function() {
$(this).height(50).height(Math.min(370, this.scrollHeight));
});
$('textarea').trigger('propertychange');
//If you change textarea content with html() or append you could try something like that
$('textarea').html(somecontent);
$('textarea').height($('textarea').scrollHeight);
I would like to add an onchange event to those input fields without jquery:
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
I can already call the object with
<script type="text/javascript">
alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>
In the end, I want to add this behaviour, that if you enter a pair of coordinates into the first input, I will spread the pair over the two input fields?
How do I add an onchange event with javascript?
Ummm, attach an event handler for the 'change' event?
pure JS
document.getElementById('element_id').onchange = function() {
// your logic
};
// or
document.getElementById('element_id').addEventListener(
'change',
callbackFunction,
false
);
jQuery
$('#element_id').change(function() {
// your logic
});
Note
Note, that change event on the text field will be fired after the blur event. It's possible that your looking for keypress event's or something like that.
document.getElementById('cbid.wizard.1._latitude').onchange = function(){
//do something
}
GlobalEventHandlers.onchange docs
or
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
EventTarget.addEventListener docs
use addEventListener in your window.onload
window.onload=function(){
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
};
addEventListener
Please try with the below code snippet.
<body>
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
<script type="text/javascript">
var txt1 = document.getElementById('cbid.wizard.1._latitude');
txt1.addEventListener('change', function () { alert('a'); }, false);
</script>
</body>
I have a question about "event click" and "order of execution".
I make a example here ( The HTML is generated by a external javascript ) :
HTML:
Comment
JavaScript:
$(document).ready(function(){
$('#comments-replybutton').click(function(){
alert('2 attach event');
});
});
I want that when do click in "Comment" first execute the action of jquery (bind event).
Is this possible?
I believe you're looking for preventDefault().
More here.
$(document).ready(function(){
$('#comments-replybutton').click(function(e){
e.preventDefault();
alert('2 attach event');
});
});
$(document).ready(function(ev){
$('#comments-replybutton').click(function(ev){
alert('2 attach event');
ev.stopPropagation();
});
});
You mean, like this?
Edit after comment
You can also name your function to unbind:
var myEventHandler = function myFunction(ev){
$(this).unbind(myFunction);
alert('attach event 2');
ev.stopPropagation();
}
$('#comments-replybutton').bind('click', myEventHandler);
// $(something).click(fn) is just a shorthand to $(something).bind('click', fn);
Edit 2
I guess you can kill off the original event easily, just by saying document.getElementById('comments-replybutton').onclick = "" or something similar. You can re-attach it by copying before:
var original_event_handler = $('#comments-replybutton')[0].onclick;
$('#comments-replybutton')[0].onclick = "";
$('#comments-replybutton').click(original_event_handler);
A bit dirty, but I'm too lazy to look it up :S preventDefault won't help you here, though.
http://jsfiddle.net/C37ka/
try this:
$(document).ready(function(){
$('#comments-replybutton').unbind('click').click(function(){
alert('2 attach event');
});
});
and if you need also to execute the inline statement at the end, you will need something like this:
$(document).ready(function(){
var initialEvent = $('#comments-replybutton')[0].onclick;
$('#comments-replybutton').click(function(){
alert('2 attach event');
}).click(initialEvent);
});
$('input').change(function(){
alert($(this).val());
});
$('input').val(1);
This dont work. I need capture the change input with JavaScript :-s
Thanks.
Programmatic changes to <input> elements don't cause events. Only user interaction does.
You can do this however:
$('input').val(1).trigger('change');
You have to put those functions inside the "Ready" function. see the fiddle: http://jsfiddle.net/SfjJQ/1/
$(function() {
$('input').change(function() {
alert($(this).val());
});
$('input').val(1);
$('input').trigger('change');
});
keep in mind that your:
$('input').val(1);
initializes the input to have a value of 1.
Of course you could also do this:
$(function() {
$('input')
.change(function() {
alert($(this).val());
})
.val(1)
.trigger('change');
});
As others have mentioned, .val() does not trigger any events; however, you could add a wrapper function to jQuery that will change the value and trigger the event if wanted:
$( function () {
//-- new jQuery function
$.fn.changeVal = function () {
$.fn.val.apply( this, arguments );
$( this ).trigger( 'change' );
};
//-- your updated code
$('input').change(function(){
alert($(this).val());
});
$('input').changeVal(1);
} );
http://jsfiddle.net/bA3V2/
I've got code so that when you click on a word, it is replaced by another word.
<script>
$(document).ready(function() {
$('.note_text').click(function(){
$(this).remove();
$('#note_div').append('<span class="note_text">new</span>');
// re-applying behaviour code here
});
});
</script>
<div id="note_div">
<span class="note_text">preparing</span>
</div>
I need the appended word to have the same click behaviour. What is the best way to do this?
change
$('.note_text').click(function(){
to
$('.note_text').live('click',function(){
This will cause anything on your page that ever gets the class 'note_text' to have the behaviour set by .live
You should use a .live()help or .delegate()help binding for that purpose.
$(function() {
$('#note_div').delegate('.note_text', 'click', function(e) {
$(e.target).parent().append("<span class='note_text'>new</span>").end().remove();
});
});
Demo: http://www.jsfiddle.net/PkngP/2/
You could rebind the handler:
function handler(){
$(this).remove();
$('#note_div').append("<span class="note_text">new</span>");
$(".note_text").unbind("click");
$('.note_text').click(handler);
}
$(document).ready(function() {
$('.note_text').click(handler);
});