We Keep Coding

Store triggered events on DOM

How can I store events triggered in DOM. Suppose I have one div. I want to change the color of div when I mouseover on it. Again change the color of div to previous color after mouseout. Again, change color when I click on div showing as active.
My code are as follows:
$(document).on("mouseover", ".imgpayment", function(){
$(this).parent().css("background","#89C4F4");
});
$(document).on("mouseout", ".imgpayment", function(){
$(this).parent().css("background","none");
});
$(document).on("click", ".imgpayment", function(){
$(this).parent().css("background","#59ABE3");
$(this).parent().find(".the-terms").prop('checked', true);
$("#submitBtn").removeAttr("disabled");
});
The problem is that:
How can I know that click events has already been triggered in div so that mouseout events doesn't trigger because it changes the color to default and I can't show that div is clicked and active.

You should not use css method for style manipulation. You can see why - it's very inconvenient in inflexible. There will be no problem if you toggle classes.
$(document).on("mouseover", ".imgpayment", function () {
$(this).parent().addClass('active');
});
$(document).on("mouseout", ".imgpayment", function () {
$(this).parent().removeClass('active');
});
$(document).on("click", ".imgpayment", function () {
$(this).parent().toggleClass('selected');
$(this).parent().find(".the-terms").prop('checked', true);
$("#submitBtn").removeAttr("disabled");
});
.active {
background: #89C4F4;
}
.selected {
background: #59ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="imgpayment">TEST <small>Hover to highlight, click to select</small></div>
</div>

Changing the css of button when its active

I want to change the CSS for the element btn1 (its a button) while its active.
I want to look different as long as "story" is shown (when pressed shows a div, as long as the div is shown i want the button to have a different color from the normal css)
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
});

$('#btn1').on('click', function() {
$(this).toggleClass('active'); // add/remove a css class
$('#story').fadeToggle(400);
});
in your css add
.active{
// styles you wish to apply
}

Try .css() method:
$('#btn1').on('click', function() {
$(this).css({'border':'1px solid blue', 'color':'red'});
$('#story').fadeToggle(400);
});
Working Example

:active selector https://developer.mozilla.org/en-US/docs/Web/CSS/:active
and look on this site http://www.paulund.co.uk/css3-buttons-with-pseudo-classes

It sounds like you want to do this:
$(function() {
$('#btn1').on('click', function() {
$(this).css('background-color','red'); // or whatever
$('#story').fadeToggle(400, function() { // 'complete' callback function
$('#btn1').css('background-color','white');
});
});
});

Hover highlight child should not highlight parent

I am trying to highlight the element when I hover over it (adding class). I have nested elements on my page. What I want is, if i hover over the element, the immediate element gets highlighted not all the parent ones.
Here is the snippet
$("body *").hover(function (e)
{
$(this).addClass('test');
}, function ()
{
$(this).removeClass('test');
});`
http://jsfiddle.net/3ZGQr/1/

Try
$(document).ready(function (){
$("body").mouseover(function (e){
$(e.target).addClass('test');
}).mouseout(function (e) {
$(e.target).removeClass('test');
});
});
Demo: Fiddle

Remove dynamically generated div with jquery

I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.

There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle

jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});

You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>

On-click adding and removing background color of a table data(td)

i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.

jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.

You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });