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)
});

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

Jquery fadeOut with this selector

I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me

I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle

well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation

What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.

jQuery code doesn't work on Google Chrome?

This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks

http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.

Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/