We Keep Coding

If div changes content

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/

How do I avoid one 'click' that triggers two functions?

Hi I have two JS functions:
$('button').click(function() inside $(document).ready
$(document).on('click','button', function()
the second function is design for buttons that I dynamically generated.
The problem I have is that when I click the button that associates with first function, the second function also gets triggered. How can I avoid this?
PS: since I give names to each button and this conflict is not affecting functionalities at all, but I think that one click trigger two function is not very smart :(

That is because of event propagation.
You can stop the event propagation in the first handler to prevent the dynamic handler from being fired.
$('button').click(function (e) {
e.stopPropagation();
//your code
})
But a more appropriate solution will be to add a common class to all the dynamic button elements and target only them with the delegated handler like
<button class="mydynamic"></button>
then
$(document).on('click','button.mydynamic', function(){
});

You can find documentation for event.stopPropagation() here

Wrap your dynamicly generated buttons into a div:
<div class="wrap">...buttons... </div>
and listen on the div:
$('.wrap').on('click','button', function(){});
It will be more efficent.

Button Fetched using ajax does not respond

I have a small issue. So i have a php page whose content return a button using ajax such as shown below:
HTML part:
<a href="#" class="unit_register_button">
Register
</a>
jQuery part:
$('a.unit_register_button').click(function(e){
e.preventDefault();
alert('yaay');
});
Problem:
The button does not respond to the jQuery.
I have tried copying the exact line of html with the button to the page directly and works perfect when I click.
What is the solution and why does the button not work when it is displayed using ajax?

you should use event delegation for that
$(document).on("click","a.unit_register_button",function(e){
e.preventDefault();
alert('yaay');
});
Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

There is couple ways, one of them is by using on function:
$(document).on('click', 'a.unit_register_button', function(e){
e.preventDefault();
alert('Alert message');
});
And another is with delegate function:
$(document).delegate('a.unit_register_button', 'click', function(e){
e.preventDefault();
alert('Alert message');
});
Here jsfiddle with working examples.
Hope this helps.

Jquery SlideToggle, prevent toggle in particular circumstance

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 click event not triggering button action

I am using jQuery and I have loaded a bunch of JavaScript for a web page which works as expected. However when I try to add the following code to trigger a button click, the button is not activated:
$(document).ready(function(){
$('.add_link').click();
});
I am wondering what I am doing wrong? I have this bit of code in a separate file that gets loaded after all the other JavaScript files are loaded. Any hints?

$('.add_link').click();
Maybe the button is not found, because it does not have the specified class. Look for typos or maybe you just forgot to set the class for the button?
What should happen, when you click the button?
What is the html code for this?

I have found the answer after playing around some more. Since I am using Drupal, I need to use a closure to make sure it works correctly. The correct code should be:
jQuery(document).ready(function($){
$('.add_link').click();
});
It is always the small things that trip you up. Thanks for all the responses.

HTML:
<button class="add_link">Click ME</button>
Javascript:
$(document).ready(function(){
$('.add_link').click(function(event){
//I'm the event handler
console.log(event);
alert(".add_link clicked!!!");
});
});
Other examples:
$(document).ready(function(){
//Named function
function myHandle(event){
//I'm the event handler
console.log(event);
alert(".add_link clicked!!!");
}
//adding event with event alias
$(".add_link").click(myHandle);
//adding event with jQuery.on
$(".add_link").on("click", myHandle);
//adding event with jQuery.on and delegation
$("body").on("click", ".add_link", myHandle);
});
I use jQuery.on because syntax of delegation and simple event handling is almost the same. jQuery.on is newer then jQuery.bind, jQuery.live and jQuery.delegate too.
jsFiddle