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.
Related
I have multi link to delete via ajax:
<a id="id-1">link1</a>
<a id="id-2">link2</a>
<a id="id-3">link2</a>
<a id="id-4">link2</a>
...
this is a simplified of my code:
$(document).on("click", "[id^=id-]",function(event) {
event.preventDefault();
var btnid = this.id;
alert('1:'+btnid );
// a dialog confirm to aks delete in bootstrap
$("#confirmbtn").on( "click", function(event) {
alert('2:'+btnid );
});
})
when I refresh page for first one I got this in alert:
(click on <a id="id-1">link1</a>)
1:id-1
2:id-2
but for second,third and ... I got wrong!
for example for second:
(click on <a id="id-1">link2</a>)
1:id-2
2:id-1
2:id-2
the third:
(click on <a id="id-1">link3</a>)
1:id-3
2:id-1
2:id-2
2:id-3
I expect
1:id-3
2:id-3
can help me to solve that?
As you are binding event handler inside another event handler, a new event handler is getting attached every the element is clicked, thus you are getting the issue. You can use .data() to persist arbitrary data.
$(document).on("click", "[id^=id-]",function(event) {
event.preventDefault();
var btnid = this.id;
alert('1:'+btnid );
$("#confirmbtn").data('id', this.id)
})
// a dialog confirm to aks delete in bootstrap
$(document).on( "click", "#confirmbtn", function(event) {
alert('2:'+$(this).data('id'));
});
You are binding multiple eventhandlers to the button. With each clicked link (link-1, link-2 etc.) you add a new one to the button, but the existing ones remain. To solve this, you could add an event handler to the confirm-button on initialization and use a variable, which tells you anytime, which link was clicked last. You could do this like this:
$(document).ready(function() {
var lastLinkId;
$("#confirmbtn").click(function() {
alert("2: "+lastLinkId);
});
$(document).on("click", "[id^=id-]",function(event) {
event.preventDefault();
lastLinkId = this.id;
alert('1: '+lastLinkId);
});
});
I have this button:
<button type="button" id="topic_schedulati" class="btn btn-info">Mostra Topics Schedulati</button>
This is my jquery code to handle the click:
(function() {
$(window).on('action:ajaxify.end', function(event, data) {
if (new RegExp(/^category\/[0-9]+/).test(data.url)) {
$(document).ready(function(){
$('body').on('click', '#topic_schedulati', function() {
console.log("hi");
});
});
}
});
}());
Why when I click on the button I show the print "hi" two times and not one? Anyone can help me?
Most likely this action "action:ajaxify.end" is being called multiple times. As you're attaching the event to the body there is no need for your other conditions as the event will be responsive to any added element that matches the id "topic_schedulati" keep in mind that you should only have 1 element with that id or you'll have erratic behavior depending on the browser.
$(function() {
$('body').on('click', '#topic_schedulati', function() {
console.log("hi");
});
});
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
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");
}
Div with class ="front" is clone more than once on a html page ,button nested (class=poperbtn) clone as well, the button use is to open dialog-box/pop up (class="poper"), for example : if I have 4 divs -> class=front which means 4 buttons -> class="poperbtn", everytime I click on one of these buttons the dialog-box must pop-up, how to do this? is it possible? here is a code example.
//Dialog - box open button
<div class="front">
<input type="button" class="poperbtn" value="push it!" /> </div>
// Div for Dialog box
<div id="poper"> <h1>here I am </h1></div>
//To avoid using id I select button (id=poperbtn) this way - works fine I got id="poperbtn" button .
var _btnToDialog = "";
$(".front").live("click", function () {
_btnToDialog = $(this).next().children().eq(0);
});
//Dialog box Jquery function - I am not sure about this code.. got stuck here..
$(function () {
$("#poper").dialog({
autoOpen: false,
width: 650,
height: 600,
});
$(_btnToDialog).click(function () {
$("#poper").dialog("open");
});
});
});
**According to comments,I changed the button - has no Id only class.
You can hang click handler for all input inside .front elements.
Due to dynamically created elements it should be, for example
$(document).on("click", "selector", function() {})
instead of
$("selector").click(function() {})
So finally code will look like:
$(document).on("click", ".front input", function() {
$("#poper").dialog("open");
});
You can add class (for example, .button) for required inputs. Then code can be simplified to:
$(document).on("click", ".button", function() {
$("#poper").dialog("open");
});
Update. With inputs class .poperbtn it will be
$(document).on("click", ".poperbtn", function() {
$("#poper").dialog("open");
});
You can also have a look at this JSBin solution. There are many ways you can approach this problem it depends on what the desired behavior is you want to provide and the way you have already things in your codebase.