We Keep Coding

How to disable the click on an icon after one click?

After clicking on the icon with ids (#prevleft and #nextright) , an ajax function is called. During the time ajax function loads a new table, I want to disable the icon click.
HTML Code:
hrHTML='<tr><th colspan="5"><i class="icon icon-chevron-left icon-2x lr"
style="float:left;" title="Previous Five Weeks"
id="prevleft"></i>' +"Weekly Utilization"+'<i class="icon icon-chevron-right
icon-2x lr" style="float:right;" title="Next Five Weeks" id="nextright"
></i></th>
</tr>';
The table row is appended dynamically as shown above. Want to disable #prevleft and #nextright after one click.
The following line doesn't work:
$('#prevleft').prop("disabled", true);
I am new to coding, so all help is appreciated.

Just check with the version of the jquery your using, I hope that your using jquery 1.5 or below
For jQuery 1.6+
Use can use .prop() function:
$('#prevleft').prop("disabled", true);
$("#nextright").prop("disabled", true);
For jQuery 1.5 and below
You need to use .attr() and disable the icon
$("#prevleft").attr('disabled','disabled');
$("#nextright").attr('disabled','disabled');
and for re enable the icon (remove attribute entirely):
$("#nextright").removeAttr('disabled');
$("#prevleft").removeAttr('disabled');
Assuming you have an event handler on a icon, in any version of jQuery you can use the following property to check if your icon is enabled or not
if (this.disabled){
// your logic here
}

Bind simple a click event when clicked on prevleft and prevright id icon.
$("body").on("click","#prevleft ,#prevright",function(){
var _this = $(this);
$(this).prop("disabled","true");
// ajax call code right here
// on ajax success function right this line
success: function(resp){
_this.prop("disabled","false");
}});
})

You have attached an event listener to one or more elements that do not yet exist in document. You can use event delegation, or jQuery() function to attach event to element when created.
Pass html string to jQuery(), use .find() to get "#prevleft", #nextright selectors, attach click event using .one(), append jQuery() object to document
$(elementWherehrHTMLIsAppended)
.append(
$(hrHTML)
.find("#prevleft, #nextright")
.one("click", function() {
$(this).prop("disabled", true)
}).end()
);

You can add a class to the element and check for the class when the user clicks.
For example:
$('#prevleft').click(function(){
if($(this).hasClass('clicked')){
// do nothing or return false
}else{
// ajax call
// on a successful call you can add the class using:
$('#prevleft').addClass('clicked');
}
});
Let me know if this is what you were asking for. This also gives you the ability to add an alert or do something if the button was already clicked.
Hope this helped!

Try my code, this event only called when icon hasn't class 'clicked', in the first call we will add 'clicked' class to prevent this event from this time.
$('#prevleft:not(.clicked), #nextright:not(.clicked)').on('click', function(){
$(this).addClass('clicked');
});
Hope this can help you!

jquery click not working on dynamically added hrefs in IE11

Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.

You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.

I have to click twice to activate function using jQuery

I am having a lot of trouble with jQuery. I have to click twice on a button to make the page disappear. I have tried importing both versions of jQuery and I tried to use the fadeOut() function on different elements, but nothing has prevailed. It works the second time I click, but never the first. This is a recurring problem, and I need to know how it can be fixed. Here is my code:
HTML:
<body>
<h1>CSS3 Buttons Showcase</h1>
Click Me!
</body>
JavaScript:
function fadeBg(){
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}

You must change your function to:
function fadeBg(){
$("body").fadeOut(1000);
}
In your HTML code onclick is being set to run your function fadeBg. So in your function you must put what you want to run; in this case $("body").fadeOut(1000);

The issue is that you're not binding the jQuery event handler until the fadeBg() function is called on the first click. Try this instead:
<h1>CSS3 Buttons Showcase</h1>
Click Me!
$(function() {
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
});

There are two ways to bind a click to an element :
1. The old dirty inline javascript (avoid)
(HTML) : <button onclick="doSomething()">
and 2. the cleaner event binding
(HTML) : <button id="myButton">
(JS) : $('#myButton').click( doSometing )
You mixed both, binding two clicks on the same element.
<button onclick="doSomething()">
function doSomething(){ // will be done on first click
$('#myButton').click( doSometingElse ) // will be done on second click
}

You are doing the same action twice, the code is:
HTML
<body>
<h1>CSS3 Buttons Showcase</h1>
Click Me!
</body>
JavaScript
$(document).ready(function() {
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}

function fadeBg(){
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
You added the onclick event directly in your html. This function adds a second event to the same button.
Just remove the onclick event in your element And do this:
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
It's considered bad practice adding onclick events directly in your html element. You can but it doesn't look good.

Can't Add Event Handler Into Button With ID

I've got a jQuery plugin installed on a website I'm working on. The plugin in question adds a modal dialogue to the website when a certain image is clicked. I wanted to add a second button to this modal, to close the window in addition to the close button that already does so, and I managed to do this by creating a div for the button in the HTML. Note that the content for the modal is set in the plugin's content variable, so looks like this:
content: '<p>Want to get in touch? Drop us an email at:</p><br/>
<p><input type="text" id="inset" name="inset"
value="shoesfromlastnight#gmail.com"
onClick="javascript:this.focus();this.select();"
readonly="readonly" size="30"/></p> <br/>
<span id="appendto"><p>We look forward to hearing from you!</p></span>
<div type="button" id="crmbutton">Okay</div>'
...where #crmbutton is the div I want to use as a button. For some reason, though, I'm having trouble with setting the event handler to the button created there in order to make it close the modal. It sounds simple enough, but for some reason won't work when I do:
$("#crmbutton").click(function() {
this.close();
});
Although I couldn't find any documentation on it, the close() method I'm using here is the very same that is used by the plugin's own X button to close the modal. For what it's worth, here's that button's code, first to create the close button and then, using the .on method, to close the modal on click:
this.closeButton = jQuery('<div/>', {'class': 'jBox-closeButton jBox-noDrag'}).on('touchend click', function(ev) { this.isOpen && this.close({ignoreDelay: true}); }.bind(this));
I also copied everything after the .on method and applied it to my code, but wasn't successful with that either.
I also tried other approaches, like adapting the code above to create the button on the fly, and then appending or prepending it using the append/prepend methods. This worked, but only when appending to the modal's container, which always added the button outside of the container. I had no luck with appending the button after certain elements, like the #appendto - the button just wouldn't be added.
Does anyone know where I could be going wrong here? This is the first time I've worked with jQuery, and it's frustrating me to no end. Thanks!

The problem is because you're not calling the close method in the correct scope. In your eventlistener, 'this' points to the button. But in the code that you looked at, 'this' has been changed to another scope with the .bind() method.
$("#crmbutton").click(function() {
/* 'this' points to the element #crmbutton, which doesn't have a close method */
this.close();
});
The example code, look at the bottom where the .bind() method is used.
this.closeButton = jQuery(
'<div/>',
{
'class': 'jBox-closeButton jBox-noDrag'
}
).on(
'touchend click',
function(ev) {
this.isOpen && this.close({ignoreDelay: true});
}.bind(this) /* The scope is being set to another 'this' */
);
Documentation about the .bind() method

Change .prev() button to disabled on click of another button

I have two buttons and I need one to stay disabled until the other is active. And then I need that same button to become inactive and go back to a previous class if the first button is clicked/toggled again. I only have have access up to jQuery 1.7.2:
<button class="primaryClass" value="primary"></button>
<button class="linkClass" value="link"></button>
Thus far I tried this but it does not seem to be working:
$('.linkClass').on('click touchend',function() {
if($(this).hasClass('linkClass')) {
$(this).prev('.primaryClass').addClass('disabled');
e.preventDefault;
}
if($(this).hasClass('linkClass-active')) {
$(this).prev('.primaryClass').removeClass('disabled');
});
So basically, the user clicks the button with linkClass the button with primary class becomes enabled because the disabled class is removed. If the user clicks it again, then the primaryClass button again becomes disabled. Any ideas what I am doing wrong?

Your question is fairly vague, please try to make a fiddle. As far as I can tell you should be setting .prop("disabled", true); to make the button disabled. If you don't have a css .disabled class, you won't see it, that and you should always use built in functionality.

Instead of adding the class you can disable the button using the disabled property. This will prevent clicks on the button from firing any event handlers.
$('.linkClass').on('click touchend',function() {
var primary = $("button.primaryClass");
primary.prop("disabled", !primary.is(":disabled"));
});
JS Fiddle: http://jsfiddle.net/6SNQS/2/

use toggleClass
http://api.jquery.com/toggleclass/
$('.linkClass').on('click touchend',function() {
$(this).prev('.primaryClass').toggleClass('disabled');
e.preventDefault;
});
The part with 'linkClass-active' I don't understand so I left that out.
If you want to also toggle the disabled property use this:
$('.linkClass').on('click touchend',function() {
var $target = $(this).prev('.primaryClass');
$target.toggleClass('disabled');
$target[0].disabled = !$target[0].disabled;
e.preventDefault;
});
fiddle: http://jsfiddle.net/Yyk2G/
By the way, why are you setting value? its not an input its a button tag.

You mean like this DEMO:
html
<button class="primaryClass" disabled="disabled" value="primary">Bye</button>
<button class="linkClass" value="link">Hi</button>
js
$('.linkClass').on('click touchend',function() {
$(this).prev().prop('disabled', function(idx, oldAttr) {
return !oldAttr;
});
});
jQuery attr() takes a callback. So you can use that to your advantage.