Develop Reference

How to disable anchor tag onclick events inside div element?

I have html content as given below.
<div>
Link 1
Link 1
Link 1
Link 1
Link 1
</div>
Problem:
When I click on any link, in the onClick function I will make one ajax call.
I just want to disable all the onClick events of a tag(or disable the entire div and all of its child elements) till I get the ajax response after getting the response I need to re-enable all the a tag onclick events.
Is there any way achieve the same?

You can use beforeSend callback of jqXHR where you can disable all anchor tag and
jqXHR.always() callback where you will enable all anchor tag .
go through Jquery Ajax Documentation

Thanks for so many solutions.
I have found a very simple solution.
Solution:
You can use the CSS property pointer-events to disable the click event on any element:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
// To disable:
document.getElementById('id').style.pointerEvents = 'none';
// To re-enable:
document.getElementById('id').style.pointerEvents = 'auto';
// Use '' if you want to allow CSS rules to set the value
Thanks,
Dixit

Link 1
someFunction(){
//some code here
$.get('test.aspx', function(data){
//do something here
})
return false;
}
Check This DEMO

You can use .ajaxStart() & .ajaxStop() JQUERY events to do this. You can create a different css to disable the anchor tag as below :
$('a[href]').each(function () {
var $this = $(this);
if ($this.attr('href') && $this.attr('href') != '') {
$(this).attr('data-href', $(this).attr('href'));
$(this).removeAttr('href');
}
});
and while enabling it back
$('a[data-href]').each(function () {
var $this = $(this);
if ($this.attr('data-href') && $this.attr('data-href') != '') {
$(this).attr('href', $(this).attr('data-href'));
$(this).removeAttr('data-href');
}
});
This will remove your href and create a custom attribute. So your click event will not work on anchor tag.

set a flag for active status
function someFunction(){
var status = $('#parentDiv').attr('data-active');
if(!status){
$("#parentDiv").attr('data-active',true);
//make ajax call
$.ajax("url", {
success: function(data) {
$("#parentDiv").attr('data-active',false);//make false when done
}
});
}
}
<div id="parentDiv" data-active="false">
Link 1
Link 1
Link 1
Link 1
Link 1
</div>
Note: This is an alternate solution. IMHO kedar kamthe's solution is the best way to solve this problem

You can try this:
1) Add class to div:
<div class="myDiv">
Link 1
Link 1
Link 1
Link 1
Link 1
</div>
2) Hide div when ajax starts and show div in success of ajax:
$(".myDiv").css('opacity','0.25');// blur div when ajax starts
$.ajax("test.php", {
success: function(data) {
$(".myDiv").css('opacity','1');// display div as ajax complete
},
error: function() {
alert('An error occurred');
}
});
});

you can use beforeSend to set a callback function to disable all elements. and enable them in success. You can add a function to disable/enable those element. add an id to the div.
$.ajax(
url: "your url",
beforeSend: function( xhr ) {
disabledFields(true);
},
success: function(){
disabledFields(false);
},
error: function(){
disabledFields(false);
});
//
function disabledField(isDisabled)
{
$("#myDiv").find("a").each(function(){
if (isDisabled)
{
$(this).attr("disabled", "disabled");
}
else
{
$(this).removeAttr("disabled");
}
});
}

Attach one time event to dynamically added elements

I have a web page where there is a button, when the button is clicked a Textbox is added to a DIV. Here is a similar code that I'm working with:
HTML
<button class="addText">Add Textbox</button>
<div class="textCont">
</div>
JavaScript
$(document).on("click", ".addText", function() {
var textarea = $("<textarea/>", {class: "newText"});
$(".textCont").append(textarea);
});
$(document).one("focus", ".newText", function() {
alert("Great");
});
Fiddle: http://jsfiddle.net/ErRohitAgg/g3A7T/
What I'm trying to do is to show an alert for first focus of every textbox that is added. But, instead the focus event is executing only once, and not once for each Textbox.
Is there any way the event behaves according to the functionality I need??

Add the event handler to each textarea instead
$(document).on("click", ".addText", function() {
$("<textarea/>", {
'class': 'newText',
one : {
focus: function() {
alert("Great");
}
}
}).appendTo(".textCont");
});
FIDDLE

I would rather do it by adding newclass on first focus:
$(document).on("focus", ".newText", function() {
if(!$(this).hasClass('focused')){
$(this).addClass('focused')
alert("Great");
}});
Working Demo

Backbone Event Map Doesn't Recognize Classes

Stack.
I'm using Backbone's event map in my View.
JS:
events: {
"click .edit-info-button": "pullEdits"
},
pullEdits: function(e){
// Get the value of the button clicked
e.preventDefault();
$(".edit-info-button").click(function(){parseEdits(this.value);});
}
HTML:
<button class="button edit-info-button" value="edit address">EDIT</button>
When edit-info-button is a class, the event listener does not work. pullEdits() never fires.
When I change edit-info-button into an id ("click #edit-info-button", "button id='edit-info-button', etc.) pullEdit() and all functions after it run successfully.
The issue is, the page I'm working on needs multiple edit buttons and I'd like to give them the same class and pull the value instead of giving them all unique ids.
Am I missing something? Thanks.

Try this instead.
...
events: {
"click .edit-info-button": "pullEdits"
},
pullEdits: function(e){
var val = $(e.target).attr('value')
return parseEdits( val );
}
...

Backbone: Toggle methods on some event

I want one button to toggle two methods in backbone but I'm having issues. I'm pretty much new to JS in general.
If you click on a button:
I want to show a hidden div
change the text of the button clicked
Then, if you click the button again (which has the new text and the hidden div is shown)
Change the text
Hide the shown div
The second method of .hide is not being fired? I'm wondering if this is because .hide is not in the DOM initially, because it's being added on the show method. Just a guess and maybe there's a better way to toggle methods on one class?
Here's my JS
'touchstart .share-btn' : 'show',
'touchstart .hide' : 'hide'
'show' : function (e) {
var view = this;
$(e.currentTarget).closest('.tile').find('.share-tools').fadeIn('fast');
$(e.currentTarget).addClass('hide');
if ($(e.currentTarget).hasClass('hide')){
$(e.currentTarget).find('.button-copy').closest('.button-copy').html('close');
}
},
'hide' : function (e) {
var view = this;
if($(e.currentTarget).hasClass('hide')) {
$('.share-tools').fadeOut('fast');
$(e.currentTarget).removeClass('hide');
$(e.currentTarget).find('.button-copy').closest('.button-copy').html('share');
}
},

Maybe reworking your code a bit will help. I've created a working jsfiddle based on what I think you're trying to accomplish.
Here is the relevant view code:
var View = Backbone.View.extend({
...
// Make it clear that these are the same element.
// Ensure they will not both fire by making them exclusive.
events: {
'mousedown .share-btn:not(.hide)' : 'show',
'mousedown .share-btn.hide' : 'hide'
},
'show' : function (e) {
console.log('show');
var $e = $(e.currentTarget);
$e.closest('.tile').find('.share-tools').fadeIn('fast', function () {
$e.addClass('hide');
});
$e.find('.button-copy').closest('.button-copy').html('close');
},
'hide' : function (e) {
console.log('hide');
var $e = $(e.currentTarget);
$e.closest('.tile').find('.share-tools').fadeOut('fast', function () {
$e.removeClass('hide');
});
$e.find('.button-copy').closest('.button-copy').html('share');
}
});
You can find the working jsfiddle here: http://jsfiddle.net/somethingkindawierd/7rfs9/

Try to return false in your event listener to prevent call both methods on first click.

Inline onclick is overriding JQuery click()

A follow on from this question
Edit
JSFiddle code
As you can see if you run the code the button text does not change, the onclick is overriding the click function. If you remove the form id attribute from the function and the onclick attribute from the html tag the code works as expected (in a real scenario no onclick function implies a submit button rather than a button)
End Edit
I had thought that a typo was responsible for JQuery not firing the click() event when an inline event was specified, however I've run into the issue once more. Here's my code and the offending tag
<input id="submit1" type="button" onclick="this.disabled=true; doSubmit();" value="submit">
<script>myfunction('submit1', 'working', myformID)</script>
var myfunction = function(ID , text , formID) {
if(ID) {
var element = document.getElementById(ID);
if(formID) {
var form = document.getElementById(formID);
}
if (element) {
jQuery(element).click( function() {
if(jQuery(this).attr('disabled')) {
return false;
}
jQuery(this).attr('disabled' , 'disabled');
jQuery(this).attr('value' , processingText);
onclick = (jQuery(this).attr('onclick') || jQuery(this).attr('onClick'));
if(form && !onclick) {
jQuery(form).submit();
}
jQuery(this).click();
});
}
}
};
I'm using javascript to create a function which will disable submit buttons while keeping any onclick attribute working in case of a doSubmit, like in this case. In other cases where the form id is set and there isn't an existing onclick I submit the form. Therefore if there is an issue with the html tag I need a general way to fix it with JS.
Many thanks in advance

Your inline handler disables the button: this.disabled=true;
Then jQuery handler checks if it is disabled and returns if so:
if(jQuery(this).attr('disabled')) {
return false;
}
There is, unfortunately, no way to predict the order of event handlers execution for the same event on the same element.
As a quick fix, I can suggest this:
Demo
jQuery(element).click( function() {
if(jQuery(this).attr('disabled-by-jquery')) {
return false;
}
jQuery(this).attr('disabled' , 'disabled');
jQuery(this).attr('disabled-by-jquery' , 'disabled');
jQuery(this).attr('value' , text);
onclick = (jQuery(this).attr('onclick') || jQuery(this).attr('onClick'));
if(form && !onclick) {
jQuery(form).submit();
}
jQuery(this).click();
});