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)
});
Related
Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.
You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.
I've got a little autocomplete dropdown which I want to hide when someone clicks outside the textbox. I've been using this so far
$("#input-group_ids").on("blur", function () {
$(".input-dropdown").hide();
});
However my autocomplete dropdown has an overflow and a scroll bar if there are more than 10 options. When using the above code, clicking on the scroll bar closes the dropdown.
I need the dropdown to close only if the click is outside the textbox AND the dropdown itself. How do I do that?
Not yet tested hope this will work
$("html").click (function () {
$(".input-dropdown").hide();
});
$("#input-group_ids, .input-dropdown").click (function (e) {
e.stopPropagation;
}
In case you won't get clear with the blur event, try to register the click event to an element that is surrounding both the textbox and the dropdown. It may even be the body.
Then in the click event check the event.target element. If it is neither the textbox nor the dropdown, close it.
It feels clumsy, I know, but it is one of several working options.
Try this :
$("*:not(#input-group_ids)").on("click", function () {
$(".input-dropdown").hide();
});
Not tested because you didn't gave any jsfiddle
Have you tried the not selector the name explains it all and might work if you have a container on the dropdown and textbox
a little hackish but might work.
$(elementContainingTheDropDownContent).on('mouseleave', function(e){
$(window).on('click', function(e){
//close dropdown
})
}).on('mouseenter', function(){
$(window).off('click');
})
I found another answer to this which is actually the best version I think
$(document).click(function(e) {
if (!$('#input-group_ids').is(e.target) && !$('.input-dropdown').is(e.target))
$('.input-dropdown').hide();
});
This is slightly better than Benjamin's answer as it doesn't stop propagation of any clicks on $("#input-group_ids"), which may have unintended consequences. However I'm accepting Ben's answer as it worked and solved my problem, and he deserves the credit. =)
EDIT: Actually my version is pretty similar to #singe31's version, so I upvoted that one too
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
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/
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
});