How to remove the click event from an anchor link?
Question
I have been doing some research into this and so far, all I've been able to find it that you can only remove the event listener. Not the actual event. For example, I have an anchor link which after being clicked once. I wouldn't like the user to be able to click it again. How can I go about doing this?
I have a very simple set up below:
<script>
$(document).on('click', '.prevPage', function () {
alert("In");
if (parseInt($('.nextPage').attr('rel')) > 2) {
//TAKE OFF CLICK
currentPage -= 1;
rowsShown = $('.pageSize').val();
skip = (currentPage * rowsShown) - rowsShown;
GetMoreData(skip, 2);
}
});
function RePager(skip, btnClicked) {
/* ** NEED TO WORK OUT THE INPUT BOX ** */
if (ReportType() == 2) {
var FilteredData = $('.BoolFiltered').val();
var totalPages = GetTotalPages();
if (totalPages == 0) {
totalPages = 1;
}
var newPrevPage = currentPage - 1;
var newNextPage = currentPage + 1;
/*
1 - First Page
2 - Prev Page
3 - Next Page
4 - Last Page
4+ - Ajax filter
*/
switch (btnClicked) {
case 1:
$('.prevPage').attr('rel', 1);
$('.nextPage').attr('rel', 2);
$('.lastPage').attr('rel', totalPages);
$('.pagedisplay').val(currentPage + '/' + totalPages);
break;
case 2:
$('.prevPage').attr('rel', newPrevPage);
$('.nextPage').attr('rel', newNextPage);
$('.lastPage').attr('rel', totalPages);
$('.pagedisplay').val(currentPage + '/' + totalPages);
//PUT CLICK BACK ON
break;
case 3:
$('.prevPage').attr('rel', newPrevPage);
$('.nextPage').attr('rel', newNextPage);
$('.lastPage').attr('rel', totalPages);
$('.pagedisplay').val(currentPage + '/' + totalPages);
break;
case 4:
$('.prevPage').attr('rel', totalPages - 1);
$('.nextPage').attr('rel', totalPages);
$('.lastPage').attr('rel', totalPages);
$('.pagedisplay').val(totalPages + '/' + totalPages);
break;
default:
currentPage = 1;
$('.prevPage').attr('rel', 1);
$('.nextPage').attr('rel', 2);
$('.lastPage').attr('rel', totalPages);
$('.pagedisplay').val(currentPage + '/' + totalPages);
}
}
}
</script>
<body>
<a class="prevPage">WORK</a>
</body>
Edit: I will go into more specifics. After the user has clicked on the event, I would like to disable the click. After the function has ended, I would then like to allow the user to click the button again. I could always just change the class name but I don't want to do this, I'd rather find a more elegant solution.
EDIT 2: Check above code for actual issue
4 answers
solution1
6 2015-12-02 12:53:48
You can use .one() instead:
$(document).one('click', '.test', function(e) { $('pre').append(e.type+'ed'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="test">WORK</a> <br> <pre></pre>
As per your edits:
You can use .on() to bind the event and use .off() to unbind it. something like this:
function bindClick(e) { $('pre').append(e.type + 'ed'); $(document).off('click', '.test', bindClick); // unbound click setTimeout(function() { $(document).on('click', '.test', bindClick); // bound again after 2 sec }, 2000); } $(document).on('click', '.test', bindClick); // bound click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="test">WORK</a> <br> <pre></pre>
solution2
4 ACCPTED 2015-12-02 13:03:14
Easiest would be to use CSS instead of trying to remove listeners and what-not.
jQuery has a .addClass() function that you can use.
Example CSS
.disabled {
pointer-events: none;
cursor: default;
}
Then your script code
$(document).ready(function () {
$(".test").click(function () {
$(this).addClass("disabled");
});
});
That way you can easily do .removeClass() as well
solution3
3 2015-12-02 12:52:45
You need to wrap it in dom ready initially. Otherwise the script will run before the element is getting ready on the dom. Then you can use event.preventDefault() to disable the normal click.
$(document).ready(function () {
$(".test").click(function (e) {
e.preventDefault();
});
});
solution4
0 2015-12-02 12:54:22
$(document).on('click', '.test', function (e) {
e.preventDefault();
$(this).off("click");
});
Use .off
$(document).off('click', '.test');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.