We Keep Coding

How to detect change on the div text?

I need to detect when div text is changed. I have multiple buttons which every one can change the text in the div. Unfortunately,the following code doesn't work. I also read that DOMSubtreeModified and Mutation area are deprecated and solutions in stackoverflow don't work for me.
(function($) {
$('body').on('DOMSubtreeModified', '.heading-price', function(){
console.log('changed');
});
})(jQuery);

You can call it simply like:
$('body').bind('DOMSubtreeModified', function(){alert('changed');});
$('body').append('<h1>hello</h1>');

document.getElementById("divId").addEventListener("DOMSubtreeModified", (event)=>{
console.log(event)
});

JQuery On change, keyup not firing

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

append onclick function to div jquery

I'm trying to add an on click function to a div using these lines of code but the click event doesnt trigger the alert.
var str="<script>$(this).on(\"click\",function(){alert('hello');})";
str+="<";
str+="/script>";
$("div:contains('Send')").last().append(str);
I've also tried this and $(this)[0] but these give me the error this.on/ $(this)[0].on is not a function
I don't know what Im doing wrong and would appreciate any and all help on the matter.

Shouldn't have to go through the trouble of creating strings for script. You can just use jquerys .on and register it with a click event.
$("div:contains('Send')").last().on("click", function () {
alert('hello');
})

If you are using jQuery, you can add click event to all the div by using $("div") for selector (just remember to call the function after you load the div)
I have create an example of simple click function
$(".start").click(function() {
$(this).toggleClass("onClick");
})
http://jsfiddle.net/7j6s2Lws/2/
The $(this) will identify which object is actually trigger the event, and choose it only. In my case, if you click on a div, it will change color (of it and only it)

i would choose a slightly different approach. i hope i understood your problem right even though i dont really get what you want to achieve by putting <script> into your string here... maybe this helps:
html
<div id='container'>
<button>Send</button>
</div>
js
var $container = $("div:contains('Send')");
var elementToAppend = "<div class='myClass' style='width:100px; height:100px; border: 1px solid red'>added dynamically ... click me</div>";
appendToContainer($container, elementToAppend);
$('.myClass').click(function($element) {
alert(123);
});
function appendToContainer($container, element) {
$container.append(element);
}
fiddle
http://jsfiddle.net/2pofLnb7/2/

How do i trigger input file manually?

<input type="text" />
<input type="file" />
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
I can get browse option (open dialog box) when I click the test box. But I cannot get browse option when I trigger text box's click using jquery trigger method.
$('input[type=file]').trigger('click');
How do i solve this?

What helped for me is to set the event-listener inside:
$(document).ready(function(){
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
}};
That used to do the trick for me. You might try it as well.

You can wrap your code inside DOM ready handler $(function() {...}); to make sure your DOM elements are loaded properly before executing your jQuery code.
$(function(
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
)};

My belief is your selector $('input[type=text]') is not selecting , give it some id and use it like
$("#text").click(function(){
$("#file").trigger("click");
});

jquery blur not working on "exiting" text input even though "click" does

I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.

Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example