We Keep Coding

.on event not enabling click event

I have put together some simple code as an excercise and seem to be having a problem enabling a click event using .on('click'); method.
The .off event works fine but when i click the $('#bdReset').click(function (e) { it does not turn the click event on. I would be grateful if someone could point out my error or offer some advice as to how I can overcome this error. Many thanks
JS Version: jquery-1.11.1.min.js
Fiddle
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").off("click").addClass('disable');
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").on("click").removeClass('disable').css('cursor', 'pointer');
});
});

Try the sample code below
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").prop('disabled', true);
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").prop('disabled', false);
});
});

How to load a url and check the event of clicking of link?

I am trying to load a url then check for a particular text of anchor and now I want to set an event of clicking of that anchar tag.How can I do it?So far my code:
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{
alert($(this).text());}
});
P.S: I am trying to do this in a chrome Extension.
UPDATED CODE:
chrome.tabs.onActivated.addListener( function(activeInfo){
chrome.tabs.get(activeInfo.tabId, function(tab){
y = tab.url;
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{ alert($(this).text());
$(this).on("click", function()
{ console.log("link clicked");
alert("link clicked");
});
}
});
});
});
});

a small implementation is:
$.get(y, function(data) {
$("#mydiv").html(data);
$("#mydiv").find('a').each(function(){
$(this).on("click",function(e){
e.preventDefault();
alert($(this).html());
});
});
});
http://jsfiddle.net/vzg6q/

Assuming that I am understanding correctly what you are asking, you want to bind a click event to all anchor tags with a certain text. If so, then something along these lines should work:
Tested and working. http://jsfiddle.net/rvrF8/8/
$.get( y, function( data )
{
$( data ).find('a').each(function ()
{
var theText = $( this ).text( );
var desiredText = 'abc';
if ( theText == desiredText )
{
$( this ).on('click', function ( )
{
event.preventDefault( );
alert( $( this ).text() );
});
}
});
});

$(this).live('click', function(event){
// do something
});

Run javascript function only once

I have this simple javascript function:
<script type="text/javascript">
var popup = '0';
if(popup == '0') {
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
popup = '1';
});
});
}
</script>
<button class="button">Test</button>
I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1

What you need is .one() function. It makes sure the code is triggered only once for you.
Docs: http://api.jquery.com/one/
Docs example:
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
});

Write the code as follows:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
popup = '1';
}
});
});
</script>
Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.
Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
//unbinds *all* listeners previously registered on "document"
$(document).unbind('click');
});
});
</script>
Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.

Try:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
}
popup = '1';
});
});
</script>
You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.

JQuery Tooltip Not Allowing Button to be Clicked

I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.
http://jsfiddle.net/BgDxs/126/
$("[title]").bind("mouseleave", function (event) {
var evt = event ? event : window.event;
var target = $(evt.srcElement || evt.target);
evt.stopImmediatePropagation();
var fixed = setTimeout(
function () {
target.tooltip("close");
}, 200);
$(".ui-tooltip").hover(
function () { clearTimeout(fixed); },
function () { target.tooltip("close"); }
);
});
$("[title]").tooltip({
content: "...wait...",
position: { my: "left top", at: "right center" },
open: function (event, ui) {
var _elem = ui.tooltip;
window.setTimeout(
function() {
var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";
_elem.find(".ui-tooltip-content").html(html);
},
200);
},
track: false,
show: 100
});
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});

You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:
$('body').on('click', '.card_info_popup', function() {
alert('click');
});
instead of:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
Updated Fiddle

change:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
to
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
Updated Fiddle

Try this.
You have to use event delegation to enable the click event on the newly created tooltip button
http://learn.jquery.com/events/event-delegation/
$(document).on('click', '.card_info_popup', function() {
alert('click');
});

You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.
I have updated your fiddle: http://jsfiddle.net/BgDxs/130/
Here is the updated code:
$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
alert('click');
});

hiding div when clicked outside the div

Please look at the code here : http://jsbin.com/esokic/10/edit#source
When I click on customer support a div is shown
What I want is when someone clicks out of the div, the div should hide, I tried a couple of things, but they don't seem to work..
$(document.body).one("click", function() {$(".cust-support-outer").hide();
});
Also:
$("body").click(function(e){
if(e.target.className !== "csupport-drop")
{
$(".cust-support-outer").hide();
}
});
Would appreciate any help...
--Arnab

Arnab
I did this change in your js and worked
try this, use this js code
$(function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(document).bind("click", function(e) {
if(!$(e.target).hasClass("get-daily-alerts-outer")){
$(".get-daily-alerts-outer").hide()
}
});
$(".close").click(function(){$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){$(".get-daily-alerts-outer").show();
return false
});
});
I just changed how you bind the "click" event to the document and pass the Event object to the function so you can check over what element the click event was fire.

Try:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.cust-support-outer').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.cust-support-outer').hide();
});
});

Bind this to body
$("body").click(function() {
if ($(this).attr("class") == "cust-support-outer") {
// inside
} else {
// not inside
}
});