When i click on any button , click event is not fired . Tough i made it work using $("div").on("click", "button", function () { but i want to see it working using .class selector .
Syntax of ON:
.on( events [, selector ] [, data ], handler )
Html:
<div>
<button class='alert'>Alert!</button>
</div>
Code:
$(document).ready(function () {
$("div button").on("click", ".alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
sample to work here
It may be basic but i'm seriously starting to try & understand few concepts . Help me understand .
Your current code is trying to delegate the event for element with class alert in button. which do not exists.
If you are trying to delegate the event for button with class alert,You need to use:
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
Working Demo
$(document).ready(function () {
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
You can also try this...
$(document).ready(function () {
$("div button.alert").on("click", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
FIDDLE for reference
Related
I have a button with class name test-button test-button--check. After clicking test-button--check it should do something and be replaced by class test-button--reset
For test-button--reset I want to write another function, but It doesn't work. Because, the previous function executes again.
$(".test-button--check").on("click", function() {
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
});
$(".test-button--reset").on("click", function() {
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
});
What can I do?
Thanks
You can write your code inside the document.ready in this way
$(".test-button--check .test-button--reset").on("click", function(e) {
e.preventDefault();
var obj=$(this);
if($(obj).hasClass('test-button--check')){
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
}
if($(obj).hasClass('test-button--reset')){
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
}
});
Try using .off() to remove an event handler, in this case, it is click.
Should be something like this:
$('.test-button.test-button--reset').off().click(function() {...});
I think this will work:
var check = function checkFunc() {
alert('Check is clicked!');
$(this).addClass('test-button--reset').removeClass('test-button--check');
$('.test-button--reset').unbind('click',check);
$('.test-button--reset').bind('click',reset);
}
var reset = function resetFunc() {
alert('Reset is clicked!');
$(this).addClass('test-button--check').removeClass('test-button--reset');
$('.test-button--check').unbind('click',reset);
$('.test-button--check').bind('click',check);
}
$('.test-button--check').bind('click',check);
Using bind and unbind
Should be a really simple answer but I can't figure it out right now. I have this button:
<button id="logout" type="button">Logout</button>
And it's supposed to run this jQuery code within script tags at the bottom of the body:
$("#logout").addEventListener("click", function () {
alert('Button Clicked');
});
However, no alert pops up. I don't get it. Thanks in advance.
addEventListener is a method of DOM element not of jQuery object which is an array-like structure that contains all the selected DOM elements
To attach event using jQuery, use .on => Attach an event handler function for one or more events to the selected elements
Try this:
$("#logout").on("click", function() {
alert('Button Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="logout" type="button">Logout</button>
Using JS:
document.getElementById("logout").addEventListener("click", function() {
alert('Button Clicked');
});
<button id="logout" type="button">Logout</button>
Edit: You can get first DOM element from array-like object returned by jQuery selector using $(SELECTOR)[0] or $(SELECTOR).get(0)
addEventListener() method registers the specified listener on the EventTarget.
If you really want to use addEventListener then write the following code:
var el = document.getElementById("logout");
el.addEventListener("click", function () {
alert('Button Clicked');
}, false);
Otherwise do it with jquery
$(document).on("click", "#logout", function () {
alert('Button Clicked');
});
OR
$("#logout").on("click", function () {
alert('Button Clicked');
});
Alternate answer is:
$(document).on("click", "#logout", function() {
alert('Button Clicked');
});
This works on dynamically created elements as well.
You should use on method to use the event handlers in jquery. The addEventListener is a core JavaScript event method.
$("#logout").on("click", function() {
alert('Button Clicked');
});
You may still use addEventListner forcing jQuery code to JavaScript:
$("#logout")[0] //Now, this is JavaScript Object
.addEventListener("click", function () {
alert('Button Clicked');
});
You can use jQuery click/on function for getting the button to work.
Example:
$("#logout").on("click", function () { alert('Button Clicked'); });
$("#logout").click(function () { alert('Button Clicked'); });
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#logout").on("click", function () {
alert('Button Clicked');
});
});
</script>
</head>
<body>
<button id="logout" type="button">Logout</button>
</body>
</html>
If you go to your console like in firebug and type $() you will see the jQuery object that shows the methods and properties of the jquery function/object. There is no addEventListener on this object.
addEventlistener is a method for the DOM. If you want to take advantage of jQuery by "writing less and do more" use jQuery methods like on. This will allow you to add an event handler on an element.
$(document).on("click", "#logout", function() {
alert('button clicked');
});
var element = document.getElementById("logout");
element.addEventListener("click", myFunction);
function myFunction() {
// your code logic comes here
}
I have this button that I can't change, nor can I edit toCashier():
<input type="button" value="Till kassan" onclick="toCashier()">
And I want to track if it's clicked and execute some javascript.
$(document).ready ( function () {
$('button[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
I tried that but it doesn't seem to work. I tried various things but can't get it to work.
You have mismatched input and button, try the following :
$(document).ready ( function () {
$('input[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
Or
$(document).ready ( function () {
$('input[type="button"][value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
button !== input
You need to use the correct selector.
$('input[value="Till kassan"]')
If you make the click with function, toCashier() function need to create :
function toCashier(){
alert("Night button clicked");
}
I am trying to create a simple edit function on a button. When the user clicks the the Edit Button (containing the following classes btn btn-primary btn-edit change-btn), the text will change to "Save", the readonly attributes will be removed on the input elements, and will have a class btn-success save-btn at the same time removing the edit-btn btn-primary class. So that when the user clicks the button again, it will update and save the data. Although it removes and successfully changes the classes, the save-btn function wont work even with a simple "hello" alert. Here is my code:
$(document).ready( function() {
$('.save-btn').click(function () {
alert('hello');
});
$('.edit-btn').click(function () {
$('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
$('#firstname, #lastname').removeAttr('readonly');
});
});
Is there something wrong of my execution of the javascript/jquery here?
It doesn't work because when you are adding the save-btn click handler that class isn't on the button yet. Try to use delegates.
$(document).ready( function() {
$(document).on('click', '.save-btn', function () {
alert('hello im clicked');
});
$(document).on('click', '.edit-btn', function () {
$('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
$('#firstname, #lastname').removeAttr('readonly');
});
});
You can use the parent of the button instead of the document.
Can someone explain to me or point me to other solution for this:
class fruit is in two different tag element, and one element has add class use in jquery selector, but the alertbox is not showing. ("add is clicked")
<table>
<tr>
<td>Apple</td>
<td>Apple 2</td>
</tr>
<tr>
<td>Banana</td>
<td>Banana 2</td>
</tr>
</table>
Also when i clicked the Apple link, i want the two alert box to show.
see this FIDDLE for demo.
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
You are already doing it correct, just remove "off".
$('.fruit').on("click", function () {
alert("fruit is clicked");
});
$('.add').on("click", function () {
alert("add is clicked");
});
Don't really know what you did, but i think you would like to have this results.
$('.add').click(function () {
alert("add is clicked");
});
$('.fruit').click(function () {
alert("fruit is clicked");
});
Look here :
http://jsfiddle.net/x957pbrr/1/
In your Fiddle, you are using off("click") before the on("click", function...). The first off clears all previously registered click handlers. So you are turning off the add click handler before you add the fruit click handler
The off method unbinds all prior bound click events.
I think you would be better off putting these events into one handler.
$('.fruit').click(function () {
if ($(this).hasClass('add'))
alert("add is clicked");
else
alert("fruit is clicked");
});
When you use ".off('click')" in 2, you remove the event handler added in 1.
1. ---
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
2. ---
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
Put it in reverse order:
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
Read this: http://api.jquery.com/off/