Develop Reference

jquery not changing src of element

I have a select element in my HTML, i then have an iframe that displays PDFs. i have some jquery code that should change the "src" attribute of the iframe when a user selects an option but so far i cant seem to get it to trigger. when i click an option from the select nothing happens. i have tried using .change() and .on("change") but they do not work. i have console.log within the function but it does not log anything into the console.
The jquery
$(document).ready(function(){
var x = $("#demo-category").val();
$("#demo-category").on("change", "#demo-category", function(){
$("#readframe").attr("src", x);
console.log(x);
console.log("test");
});
});
should you need any more information i will provide it if i can.

Event delegation (that is, your
.on("change", "#demo-category", function(){
) is for when the element that triggers the event is different from the element that the listener is added to. When you want to add a plain listener to a single element, don't pass another selector - if you do that, the listener won't fire. Instead just call .on('change', fn....
Also, you're retrieving x on document load. Retrieve the new value after #demo-category changes instead:
$(document).ready(function() {
$("#demo-category").on("change", function() {
var x = $(this).val();
$("#readframe").attr("src", x);
console.log(x);
console.log("test");
});
});

I think this will work
$(document).ready(function(){
$("#demo-category").on("change", function(){
$("#readframe").attr("src", $(this).val());
});
});

Listen to any changes (caused by code) in value of an HTML element

I can use some events like "oninput", "onchange" ... to detect if an HTML element change its value. But these events occurs only when user manually change the value (By keyboard, mouse...)
But sometimes HTML elements's values are changed by my code (not by users) or by form's reset() method and I also want to listen to these change events.
So how can I detect when a value of an element changes? (In all situations)

You can try DOMSubtreeModified event
$('element').on("DOMSubtreeModified",function(){
alert('changed');
});
*Depending of the version of jquery instead of .on can be .bind
Or you can work with MutationObserver which detects changes in the DOM and is the most recommended.

You could try something like this:
document.ewatch=[];
watchEle=(id,callback)=>{
var ii=document.ewatch.length;
document.ewatch[ii]={};
var we={
watch_id:ii,
ele:document.getElementById(id)
};
we.fun=callback;
we.old=we.ele.innerHTML;
we.watch_code=function(){
var id=ii;
var ee=document.ewatch[id];
var new1=ee.ele.innerHTML;
if(new1!=ee.old){
we.fun(ee.old,new1);
ee.old=new1;
document.ewatch[id]=ee;
}
};
document.ewatch[ii]=we;
return {
start:()=>{
we.interval=setInterval(we.watch_code,100);
},
stop:()=>{
try{
clearInterval(we.interval);
}catch(e){}
}
};
};
var e1=watchEle("ele_id",(oldc,newc)=>{
alert("content change");
});
e1.start();
Attaches a watcher to an element, and watches the innerHTML content, and executes the callback on the event it changes.
For your question, you could change .innerHTML to .value

Why does the select2-removing event not trigger in select2 with allowClear?

I want to hook an event in my select2 once it gets cleared. The select2 was initalized with allowClear: true. Yet the event
$select.on('select2-removed', function(event) {
console.log(event);
});
does not trigger when resetting the select2 with the clear button.

select2 v4.0.3
$('#smartsearch').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
For all the select2 Options & Events

For me the only thing that worked is the 'select2:unselect' event... (In non-multiple select box)

According to the select2 source code, the clear method use the event select2-clearing instead of select2-removing. So you should listen to this event too.
select2-clearing and select2-removing are triggered before the removal. select2-removed is triggered after.
Keep in mind that clear does not always trigger the select2-removed event. It look like this event is triggered only if an element is actually removed from the input.

I got it working with the 'select2-removed'-event instead of 'select2-removing' when using the clear button.
As to why it does not trigger still eludes me.

I wanted to get data about the element just got removed on removed event. Following code worked for me;
$('#selector').on('select2:unselect', function (e) {
var data = e.params.data;
});

If you are working with 4 or above version then use
$('#id').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
Below 4 version
$('#id').on('select2-removing', function (e) {
alert('You clicked on X');
});
Make sure for 4 or above version it is select2:unselecting colon(:)
Less than 4 version it is select2-removing -(hyphen)

Fire an event only when an focused element looses focus

This is my Fiddle JsFiddle
$(function() {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').removeAttr("readonly").focus();
});
$('.form-control:focus').blur(function() {
$(this).addAttr("readonly");
});
});
What I am trying to do?
I am trying to create a dynamically editable form.It should have
When someone click on edit icon, the corresponding Input field should get focussed and become editable. (I completed this part).
Next i want is when an element is in focus state and it looses focus then i want to add readonly attribute again to that element. This part in not working. can somebody explain me why. and give a solution for it
EDIT:
In the later part i was trying alert("some msg") to check whether the event is getting fired or not. while posting i just replaced it with addAttr. it was a typo

You could use instead:
--DEMO--
$(function () {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
$(this).prop('readonly', true);
});
});
});

There is no addAttr() function. The setter for attr looks like this:
$('.form-control').blur(function() {
$(this).attr("readonly", true);
});
Also, the :focus psuedo selector here is redundant, as to fire the blur event the element has to have focus in the first place.

jQuery .on('change', function() {} not triggering for dynamically created inputs

The problem is that I have some dynamically created sets of input tags and I also have a function that is meant to trigger any time an input value is changed.
$('input').on('change', function() {
// Does some stuff and logs the event to the console
});
However the .on('change') is not triggering for any dynamically created inputs, only for items that were present when the page was loaded. Unfortunately this leaves me in a bit of a bind as .on is meant to be the replacement for .live() and .delegate() all of which are wrappers for .bind() :/
Has anyone else had this problem or know of a solution?

You should provide a selector to the on function:
$(document).on('change', 'input', function() {
// Does some stuff and logs the event to the console
});
In that case, it will work as you expected. Also, it is better to specify some element instead of document.
Read this article for better understanding: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

You can use any one of several approaches:
$("#Input_Id").change(function(){ // 1st way
// do your code here
// Use this when your element is already rendered
});
$("#Input_Id").on('change', function(){ // 2nd way
// do your code here
// This will specifically call onChange of your element
});
$("body").on('change', '#Input_Id', function(){ // 3rd way
// do your code here
// It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

Use this
$('body').on('change', '#id', function() {
// Action goes here.
});

Just to clarify some potential confusion.
This only works when an element is present on DOM load:
$("#target").change(function(){
//does some stuff;
});
When an element is dynamically loaded in later you can use:
$(".parent-element").on('change', '#target', function(){
//does some stuff;
});

$("#id").change(function(){
//does some stuff;
});

you can use:
$('body').ready(function(){
$(document).on('change', '#elemID', function(){
// do something
});
});
It works with me.

You can use 'input' event, that occurs when an element gets user input.
$(document).on('input', '#input_id', function() {
// this will fire all possible change actions
});
documentation from w3

$(document).on('change', '#id', aFunc);
function aFunc() {
// code here...
}