We Keep Coding

Using jquery to make a div clickable and to run a function

So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?

The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here

$(document).on('click', '#t1', function() {
froth();
});

jQuery on(click) doesn't work but on(hover) does

After initialize js I create new <div> element with close class and on("click") function doesn't work.
$(document).on('click', '.post-close', function () {
alert("hello");
});
but on('hover') work perfectly.
$(document).on('hover', '.post-close', function () {
alert("hello");
});
but I need to make it work on click.

It's because you're not preventing the default behaviour of the browser. Pass e into your handler and then use e.preventDefault()
$(document).on('click', '.post-close', function (e) {
e.preventDefault();
alert("hello");
});
Edit
Also, bind the handler before creating the new <div>

why not use something like
$('.post-close').click(function(){
//do something
});
If the element was added dynamically use:
$(document).on('click', '.post-close', function(){
//do something
});
edit:
like danWellman said, you can add the preventDefault IF you want to make sure no other code is executed. otherwise use the code above.
edit2:
changed the .live to .on

It's an old post but I've had a exactly same problem (element created dynamically, hover works, but click doesn't) and found solution.
I hope this post helps someone.
In my case, I found ui-selectable is used for parent element and that was preventing from click event propagate to the document.
So I added a selector of the button element to ui-selectable's 'cancel' option and problem solved.
If you have a similar probrem, check this
Try turn of libraries for parent element
You're not using stopPropagation() in parent element ?

Javascript event removing

Another Javascript , probobly for you minor problem , but i just can not understand how to fix it , googled all night for it , problem is simple ... i have table and inside td's i got buttons and i assigned onclick event on all of them , so when i click a button i do a function and at the end of function i want to change that event to go for another function
here is my code ...
var $UserRow = $(Final).closest('tr').clone();
$('td button', $UserRow).each(function () {
this.removeEventListener('click', GetInfo, false);
this.addEventListener('click', GetBetslip, false);
});
$UserRow.appendTo('#UserTicket');
So $UserRow is a row that i want to copy to another table and that part is working fine , but before i copy it i want to remove all button events ... i have tried with everything from
this.removeEventListener('click',GetInfo,false);
this.detachEvent('Click', GetInfo);
this.onclick = GetBetslip;
this.onclick = function () { GetBetslip()};
i just do not know what to try anymore ... can you just help me out ... all i want is to change event for every button inside that tr.

It looks like you are using jQuery, if that is the case you are looking for this function. $().off()
According to the comments you might do better with this:
$(this).attr('onclick', false);

If using jQuery, its preferable to bind AND unbind events using jQuery. You can use this method ONLY if you bind your handlers using jQuery:
Do this instead:
$('td button', $UserRow).each(function () {
$(this).off('click', GetInfo);
$(this).on('click', GetBetslip);
});

event listner ajax Jquery

I am new to Js and Ajax. I am calling a page through ajax (using jquery). the called page has a button. On button click, i need an alert box. But the event listner is not acting on the button click.
function setUpClickHandler() {
addEventHandler(document.getElementById('sideLink1'), "click", onsideLinkClicked1, false);
addEventHandler(document.getElementById('EnrollButtonClick11'), "click", onEnrollButtonClick11, false);
}
function onsideLinkClicked1(e) {
$('#CrousalLoad').load('crousal1.html');
}
function onEnrollButtonClick11(e) {
alert("hello");
}
crousal1.html is the loaded page and "EnrollButtonClick11" is the button id inside the page. Is there anything I am missing here. Plz add comments for any clarifications as I am struck here. Thanks in advance.. :)

if your using jQuery you can skip that in just do this.
$("#sideLink1").click(function (){
alert('hello');//you do it directly in the function
onEnrollButtonClick11(); //or call a function from here.
})
Source:
http://api.jquery.com/click/
says the same thing.

This probably happens because the button you are registering a click to with the id of EnrollButtonClick11 doesn't exist on the page at that moment. Since you are using jQuery try something like $('body').on('click', 'EnrollButtonClick11', onEnrollButtonClick11);

jquery related question

i am modifying the inner html through javascript, and the inner html involves a button
but when i put in the jquery code to run on the button click event it fails to do so ..
sorry but im a newb when it comes to javascript
content im adding into the html ..
function add()
{
var val=document.getElementById("ans").value;
document.getElementById("answers").innerHTML+="<tr><td>"+val+"<br/><p align=\"right\"><button class=\"replyb\">replies</button></p>"+"</td></tr>";
document.getElementById("ans").value="";
}
jquery code ...
enter code here

At a guess, because we don't have your jQuery, I would say you need to use .live() instead of .click() when you change the HTML the button will be NEW to the DOM.
When you apply your jQuery code, it adds any calls like .click() to any DOM item, when the page loads. So any NEW element doesn't have a .click() handler added to them.
Do solve this, you can change your .click():
$('#someitem').click(function() {
.....
});
To something like this:
$('#someitem').live('click', function() {
.....
}

Add the following in your page at some place and it will handle clicks to all .replyb buttons whether you add them with javascript at any time, or not.
$(function(){
$('button.replyb').live('click', function(){
alert('clicked on button');
});
});
have a look at jquery .live() method