Develop Reference

Not working Jquery

I using comboBox Plugin.When i choose zawgyi-one in dropdown listbox, jquery not working.Why?
html
<div class="result">
<span>မြန်မာစာ(Myanmar Text)</span>
</div>
<!-- For Testing Jquery -->
<button id="click-btn">Jquery Testing Button</button>
javascript
jQuery(function($){
$(document).ready(function(){
$("#click-btn").click(function (){
alert("jquery Work");
});
});
});
DMEO LINK is http://jsfiddle.net/qq6uq7c6/11/

I have found the issue.
The combobox plugin is calling this line document.body.innerHTML=_html; when ever a select change is happening. What that does is replace the elements with clone of same elements but the problem here is it doesn't clone the events attached to it. (So i recommend not to use this plugin itself since it may kill other plugin events also).
To over come this you can use jQuery delegated event and it HAS TO BE assigned to document object or any parent object and use jQuery instead of $.
The updated code will look like
jQuery(document).ready(function(){
jQuery(document).on('click',"#click-btn",function (){
alert("jquery Work");
});
});
Here is a working fiddle.

How to invoke a 'click' when user clicks on href

I'm trying to fire an alert when a user clicks on an anchor tag, but the alert is not being fired. The code I am trying is below.
http://jsfiddle.net/NLdTJ/
<a id="collapse"> Collapse</a>
$(function(){
$('#collapse').click(function(){
alert('here');
});
});

Your code is ok, but you weren't loading jQuery in your fiddle.
http://jsfiddle.net/NLdTJ/3/
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
P.S.:
I've attached your code again because SO didn't let me post the answer with just a link to jsfiddle and no code :)

You need to have a href before a tags become hyperlinks. Otherwise they are just anchors. TO fix it you should do the following:
<a id="collapse" href="#"> Collapse</a>
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
Hope that helps.
(I also assumed jQuery, but your fiddle was set up with mooTools, not sure if it was on purpose. Here is my fix: http://jsfiddle.net/NLdTJ/13/)

Make sure you prevent the default click behaviour of a link.
$(function(){
$('#collapse').click(function(e){
e.preventDefault();
alert('here');
});
});
Working sample : http://jsfiddle.net/NLdTJ/15/

<a id="collapse" href="#" onclick="alert('here');"> Collapse</a>

It should work fine, just change the framework on JSFiddle to include JQuery and run on DOMReady

There's absolutely nothing wrong with your code. It will work when you pick a jQuery library from the Framework options on the left side of jsFiddle.
Updated fiddle to include framework.

jQuery show not working after added a new element in document

I am loading elements into a div container using Ajax / Request. By default I'm hiding an input box. If a user clicks an edit icon on that div, I want to show the input box. Here is my code:
HTML CODE
<div class='container'>
<input type = 'text' onkeydown='saveFn(event,this)' name = 'editemail' class = 'editemail' style='display:none; height:20px;' />
</div>
JS CODE
$(".container").click(function(){
console.log($(this).find(".editemail").show()); //Note it works fine If i didn't load any new elements into the div.
});
Console Log Output before loading new element into the container.
<input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; " value="hyther#zohocorp.com" title="press enter to save">
Console Log Output after loading an element into the container.
<input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; display: none; " value="saravanan#zohocorp.com" title="press enter to save">
Even though I am also tried to remove the "style" attribute from this element and adding a new style element, it still doesn't work.

First you should read the jQuery Docs FAQ section: Why_do_my_events_stop_working_after_an_AJAX_request
Use on() to delegate the handler for future elements
$(document).on('click', ".container", function(){
/* your code*/
})

Try this instead:
$(document).on('click','.container',function(){
http://api.jquery.com/on/

Try this one instead:
$('.container').live('click', function(){
/* Your Code Here */
});

The problem is that the click() bound is getting lost after an ajax request. In JQuery you can use .live() function to get this working however this function is now deprecated and they encourage you to use .on() or .delegate(). Personally i've have tons of headecks using .on() and .delegate() and rather use the plugin livequery. With livequery plugin is as simple as:
$(function(){
$('#elementId').livequery('click',function(){
//do something on click
})
});
For more information go to:
.livequery()
.on()
.delegate()

jQuery live change on checkbox IE8

I have a couple of checkboxes loaded in with Ajax (because of database data),
Now I want to do some actions when these checkboxes changes from unchecked to checked and vice versa.
I am also using this for my checkbox:
http://widowmaker.kiev.ua/checkbox/
this is my checkbox code:
<input type="checkbox" id="boats" class="boatID-2 afvaartijdID-3 boats" style="position: absolute; z-index: -1; visibility: hidden;">
I have tried live change function and on change function but both wont work in IE8.
Like this
$(document).on('change','.boats',function(){
//do stuff
});
and
$('.boats').live('change',function(){
//do stuff
});
I have the latest version of jQuery.
Anybody any idea how to solve this?

$(".boats").live("click", function(){
// do stuff
})
In newer version of jQuery its recommeded to use on() and off() instead of live() / die()
$(document).on("click", ".boats", function(){
// do stuff
})

The addon I used for my checkbox
This one: http://widowmaker.kiev.ua/checkbox/
Was bugging in IE8 with the change event.
I couldnt use the live or on function to get change working, but the plugin had a couple of method to trigger change.
You where able to use the check and uncheck event to trigger change event.
So that solved the problem.
thanks all

jQuery Class selector not working

I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.

Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here

.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.

You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers

Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});