if a div changes its content after a button click, is there some way to hide another div.
for example after i hit on submit button <div id="dynamic">1</div> changes to <div id="dynamic">2</div> once it shows 2 i would like to hide the submit button completely.
i was trying to work something with the below, hope it makes sense.
$(document).ready(function(){
$('#dynamic').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
$("#submitbutton").hide();
})
})
thanks in advance.
If there is some async action involved and you don't know the exact timing when the content will be changed you could use a MutationObserver to observe a specific DOM element and execute logic if the condition within the MutationObserver is met: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
If the change of your div content is based on an API call that returns the change you could run a callback function to hide the submit button once the promise is fullfilled: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
If it is really as simple as in your example, that you click on submit and then logic to change the div is executed, you could just write the logic to hide your submit button on the next line or as a callback function after click execution.
If you are using newer version of jQuery, bind is deprecated and you should use on instead. This works for me, though as mentioned in another answer this might not be fully cross browser compatible.
$(document).ready(function(){
$('body').on('DOMSubtreeModified', '#dynamic', function(event) {
$("#submitbutton").hide();
});
});
Here's a link to a working example: https://jsfiddle.net/ky43hx6q/
Related
For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......
Hi i always use this example code to make a div work as link.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
The problem is i have inserted an other javascript action inside (this action need to stay on the current page) the problem is Not the first click but the second..
This javascript actions its an ajax function that "change" that html.. in the fiddle where i have no ajax, its working great, on first, second, third, any clic..
Here is the code http://jsfiddle.net/HzsH9/4/
Im using.. Jquery, also this is the anti propagate code im using
$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });
The outer div class is class="listingsRow"
and the inside javascript goes here
<a id="btn_remove_114" name="btn_remove_114" onclick="ajaxFavouratesRemove(1,114,375);">
<div class="fav"></div></a>
After ajax success, its changed for this
<span id="spadd114"><a id="btn_add_114" name="btn_add_114" onclick="ajaxFavouratesAdd(114);"><div class="nofav"></div></a></span>
Also i just found this, but i cant manage to do the same how to stop event propagation with slide toggle-modified with the updated code.
Classic case of event delegation
$(".listingsRow").on('click','a',function(e){
alert('clicked');
e.stopPropagation();
})
$('#singles_114').click(function(e){
e.stopPropagation()
});
So I have an H3 that has a grey background rectangle. When you click anywhere in that grey background, a particular div performs a slideToggle(). This works fine.
Now, Inside that H3 I also have a link that calls a jquery function that does something. That works fine too.
But my issue is this, since the link is inside the H3, after its functions executes, it also executes the slideToggle() because I clicked somewhere inside the H3.
So the question becomes, How do I prevent the slideToggle() from happening when I click on the link. I imagine I can use a flag but I'm hoping there is a more elegant way.
Any help would be appreciated.
The HTML code
<h3 id="data_id">
<a href="#" id="random_id" >Random</a>
</h3>
<div id="data_div_id">
// The data here is irrelevant to the issue at hand
</div>
The Jquery Code
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
// it does something irrelevant to the issue at hand
});
You can use event.stopPropagation() to stop the event from bubbling.
jsFiddle here.
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
event.stopPropagation();
});
Try skipping the element you don't want the event for:
$('#data_id').click(function(event) {
if (event.target !== this)
return;
$('#data_div_id').slideToggle('slow');
});
Like this only #data_id will trigger the toggle and since your h3's are in that div it gets executed when you click on them too, but only once from actually clicking the container
jQuery(document).click(function () {
jQuery('.close-news').css('display', function(){return jQuery('#colorbox').css('display');});
});
I have this script, which make my link appear\dissappear depends on state of #colorbox block. But somewhy link appear\dissappear not immediatelly, but after 2 click.
Basically i have to click one more time in random area to make my script work
I guess its because my html code isnt update fast enought to make . So how do i add some timeout for this script?
It seems you are using Colorbox in Drupal.
There can be a callback function that gets executed once the Colorbox is shown up.
After Debugging your site, seems that there is a cbox_complete custom event firing up.
If thats the case, you can attach a function to this event.
In the function, you can toggle the display of your .close-news li element, similar to what you are doing on document click in the question
I'm having problems with .live() and confirm. It's multiplying the confirm dialogs for every click. I know about .die() but i can't get it to work.
$("button.del").live("click", function(){
if(!confirm("Are you sure?")) {
//close
}
});
I've tried $("button.del").die("click"); right after the above code, in which case the confim doesn't even fire.
Does the dialog box appear multiple times if you just run that code by itself?
If the dialog box is appearing multiple times, one likely explanation is that you are accidentally running this .live() binding more than once. If that happened, you would see one dialog box for each time you bound an event to the button.
Make sure you are only attaching this function to the button once.
If you take a look at this standalone example, you can see that your code is fine.
Can you post the HTML as well.
One cause I can speculate for this is that the .del class is specified into some child class, and the event is firing on both parent and child. This would happen for the following:
<div class="testclass">
test
<div class="testclass">
test2
</div>
</div>
...
$(".testclass").click(function() { alert("test"); });
Another reason would be if you accidentally bound it twice, i.e. the following would cause the same problem
$(".testclass").click(function() { alert("test"); });
$(".testclass").click(function() { alert("test"); });
We really need to see more of your code. You must utilise live for a reason. Do you get the same result with a simple click() binding?
Thank you all for your replies...turn out it was a bug in my code... Sorry...
I didn't see it... the part of the code with confirm was reloading on every click...hence the multiplying...