We Keep Coding

jquery (hover and load) events binding on dynamically created elements

I am able to bind click event to element with class name keybox. And this element is generated dynamically.
$('body').on('click','.keybox', function(){
// some code here
});
But for same element I tried binding hover and load event using following code:
$('body').on('hover','.keybox', function(){
// some code here
});
$('body').on('load','.keybox', function(){
// some code here
});
....and its not working as expected.
Can someone help with this problem? I want to bind hover and load event to my element with class name keybox and this element is generated dynamically.

Instead of hover, use mouseenter and mouseleave event. Instead of body.load use
$(document).ready(function() {

You can use following approach to bind multiple events and get object information via event object.
$('body').bind('click hover load', '.keybox', function(e){
if ( e.type === 'hover') {
// do something
}
else if(e.type === 'click') {
// do something
}
....
});
Make sure you bind events in $(document).ready(function() {} or load javascript just in bottom of html document body.

Since hover is deprecated you should use mouseenter and mouseleave for load you can write using event using on(load is equivalent to ready).
$(function(){
$(document).on('mouseenter', '.keybox', function () {
$(this).css('color','red');
});
$(document).on('mouseleave', '.keybox', function () {
$(this).css('color','black');
});
$(document).on('click', '.keybox', function () {// click on dynamically loaded events.
$(this).css('color','green');
});
$('#btn').click(function() {
$('#parent').append("<div class='keybox'>sample1</div>");
$('#parent').append("<div class='keybox'>sample2</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
zdhsdhsau
</div>
<input type="button" id="btn" value="create"/>

button click jquery not working

Should be a really simple answer but I can't figure it out right now. I have this button:
<button id="logout" type="button">Logout</button>
And it's supposed to run this jQuery code within script tags at the bottom of the body:
$("#logout").addEventListener("click", function () {
alert('Button Clicked');
});
However, no alert pops up. I don't get it. Thanks in advance.

addEventListener is a method of DOM element not of jQuery object which is an array-like structure that contains all the selected DOM elements
To attach event using jQuery, use .on => Attach an event handler function for one or more events to the selected elements
Try this:
$("#logout").on("click", function() {
alert('Button Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="logout" type="button">Logout</button>
Using JS:
document.getElementById("logout").addEventListener("click", function() {
alert('Button Clicked');
});
<button id="logout" type="button">Logout</button>
Edit: You can get first DOM element from array-like object returned by jQuery selector using $(SELECTOR)[0] or $(SELECTOR).get(0)

addEventListener() method registers the specified listener on the EventTarget.
If you really want to use addEventListener then write the following code:
var el = document.getElementById("logout");
el.addEventListener("click", function () {
alert('Button Clicked');
}, false);
Otherwise do it with jquery
$(document).on("click", "#logout", function () {
alert('Button Clicked');
});
OR
$("#logout").on("click", function () {
alert('Button Clicked');
});

Alternate answer is:
$(document).on("click", "#logout", function() {
alert('Button Clicked');
});
This works on dynamically created elements as well.

You should use on method to use the event handlers in jquery. The addEventListener is a core JavaScript event method.
$("#logout").on("click", function() {
alert('Button Clicked');
});
You may still use addEventListner forcing jQuery code to JavaScript:
$("#logout")[0] //Now, this is JavaScript Object
.addEventListener("click", function () {
alert('Button Clicked');
});

You can use jQuery click/on function for getting the button to work.
Example:
$("#logout").on("click", function () { alert('Button Clicked'); });
$("#logout").click(function () { alert('Button Clicked'); });

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#logout").on("click", function () {
alert('Button Clicked');
});
});
</script>
</head>
<body>
<button id="logout" type="button">Logout</button>
</body>
</html>

If you go to your console like in firebug and type $() you will see the jQuery object that shows the methods and properties of the jquery function/object. There is no addEventListener on this object.
addEventlistener is a method for the DOM. If you want to take advantage of jQuery by "writing less and do more" use jQuery methods like on. This will allow you to add an event handler on an element.
$(document).on("click", "#logout", function() {
alert('button clicked');
});

var element = document.getElementById("logout");
element.addEventListener("click", myFunction);
function myFunction() {
// your code logic comes here
}

Add more code to inherited event with jQuery

I have an inherited jQuery code where the scroll event has been set:
$(window).on('scroll', function(event) {
// Whatever
});
Now I need to add some more functionality to the previous code when a click event is fired, but this new code must be removed when another element is clicked, something similar to the below code:
$('#element1').on('click', function(){
$(window).on('scroll', function(event) {
// Add my code to the inherited one
});
});
$('#element2').on('click', function(){
$(window).on('scroll', function(event) {
// Unbind my code and leave the original behaviour
});
});
However, I cannot rewrite the inherited code. Is there any way to achieve this?
Thank you very much in advance

You can use event.namespace to bind the event. then you can use .off() to remove an event handler using namespace
$('#element1').on('click', function(){
$(window).off('scroll.element').on('scroll.element', function(event) {
// Add my code to the inherited one
});
});
$('#element2').on('click', function(){
$(window).off('scroll.element');
});
Using the above approach, default scroll event handler will have no impact.

Instead of binding scroll event to body you can bind it to body specific class. Clicking button will swap classes.
$(document).ready(function() {
$('.btn').click(function() {
$('.body')
.removeClass($(this).data('passive-class'))
.addClass($(this).data('active-class'));
});
});
.origin {
color: red;
}
.custom {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
Some content
<button class="btn" data-active-class="origin" data-passive-class="custom">Scroll origin</button>
<button class="btn" data-active-class="custom" data-passive-class="origin">Scroll custom</button>
</div>

Place all code inside function and use flag to execute as needed.
var additionalCode = false;
function usefulCode(event) {
// here is your default code
if (additionalCode) {
// here is additional code
}
}
$(window).on('scroll', usefulCode);
$('#element1').on('click', function(){
additionalCode = true;
});
$('#element2').on('click', function(){
additionalCode = false;
});

button action after insert with jquery not working

i have an button "add" i click it then a save button will append to my div. this is working, but i cant trigger the function of the "save" button. if i paste the "save"- button in the code directly it is working. i cant find my error...
<a class="save" href="#"><img src="images/save.png" alt="save_working" /></a>
<a class="add_row" href="#"><img src="images/icon_add_light.png" alt="add" /></a><br>
<div id="hinzu"></div>
$(".save").click(function() {
alert("saveworking");
});
$(".add_row").click(function() {
$("#hinzu").append(' <a class="save" href="#"><img src="images/save.png" alt="savenotworking" /></a>');
});
Here is an fiddle with it: http://jsfiddle.net/MgcDU/321/
Why isnt this working with the js append method?

It's dynamic, so it does not exist when you're binding the event. For that you would need to delegate the event to an element that actually exists at the time of attaching the event handler :
$("#hinzu").on('click', '.save', function() {
alert("saveworking");
});

Use it like:
$("#hinzu").on('click', ".save", function() {
alert("saveworking");
});

this is because when you try to do the $(".save") it does not exist.
You have to use the on() for monitoring if any new .save are in your doom and assign the event handler.
$("#hinzu").on('click', '.save', function()
{
alert("This Does work");
});

It is not working because the $(".save").click() call binds the onclick handler to all elements with class save which already existed at the point of the call.
To bind the event handler also to elements which did not exist at the time of the binding, you must use $(document).on('click', '.save', function() { [...] })

If you want to save you code, use this:
<script type="text/javascript">
$(function() {
$('.save').click(function() {
alert('saveworking');
});
});
$(function() {
$('.add_row').click(function() {
alert('add_row');
});
});
</script>
One more way to do this:
<script type="text/javascript">
$(document).ready(function () {
$('.save').click(function () {
alert('saveworking');
});
$('.add_row').click(function () {
alert('add_row');
});
});
</script>

HTML content is not getting on Jquery click function

In my code I have the following:
$(document).ready(function(){
$("input#Addmore").click(function(){
$('div#add_div').append("<a class='remove' href='#'>X</a>");
});
});
This code on click of add more button and I want to remove parent div of above added code on click of "X" by jquery. for that purpose i am using this code
$("a.remove").click(function(){
$(this).closest("div").remove();
});
But the code is not working because jQuery did not getting append anchor code. Can any one tell me the solution?

You need to delegate the event to the nearest static element. Try this:
$('#add_div').on('click', 'a.remove', function() {
$(this).closest("div").remove();
});
Or if you are using an older version of jQuery (less than 1.7) use delegate() like this:
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});

Try this
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});

Or you can try this:
$("input#Addmore").click(function(){
$("div#add_div").append("<a class='remove' href='javascipt:;' onclick='remove(this);return false' href='#'>X<br/></a>");
});
and here is remove function:
window.remove = function(obj)
{
$(obj).closest('div').remove();
}
see here : http://jsfiddle.net/Hvx2u/3/