I've bound an event to an icon on click. The event changes the id of a button on the page. I want a new event to be bound to that new id, and the existing event bound to the old id to be unbound. How do I do this?
I can see from Firebug that the button id successfully changes when the icon is clicked. However, when I look at POST, I see that the hidden field with id "Final_Approval" has the value of "Approved", which tells me that the event tied to the original button id occurred, and I don't want it to. All of my jQuery is inside document ready.
The original button:
<button id="btn-final-approval-no-review" class="btn btn-warning" type="submit">Final Approval</button>
The original event tied to that id:
$('[id^="btn-final-approval"]').click(function () {
$("#Final_Approval").val("Approved");
});
The event triggered when the icon is clicked:
$("#add-vendor-item").click(function () {
$('#btn-final-approval-no-review').attr('id', 'btn-vendor-rep-review2');
}
The new event I want to take place:
$("#btn-vendor-rep-review2").click(function () {
$("#ItemRequestStatusId").val("#Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});
To bind events to elements that change dynamically, you need to use delegation with on():
$(document).on('click', '[id^="btn-final-approval"]', function() {
$("#Final_Approval").val("Approved");
});
As adeneo said, you probably shouldn't move IDs around, you should use classes. But the same idea applies, you just have to change the selector in the on() call.
Use on delegate to bind click event dynamically.
$("body").on("click","#btn-vendor-rep-review2", function () {
$("#ItemRequestStatusId").val("#Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});
$(document).on('click', '#finalApproval', function() {
if($(this).hasClass('first')){
$(this).removeClass('first');
//first action to be preformed
}else{
//second action to be preformed.
}
});
then simply add class first to the button on page load.
If you need it to toggle back you can just re-add the class first in the second action to be preformed area
EDIT
after re-reading the question you probably cant use this - just substitute with the id / class of the item in question and add the if/else statement to the handler for that item.
Related
I have used the trigger() for checking the radio button after loading all the page content as the radio button value is coming from third party api.
I have make one option checked by default. So I used trigger() event for checking the radio button. The radio button have also it's click event.
In my code only radio button get selected but event is not firing.
my code is...
jQuery(document).ready(function($) {
jQuery("#btn_03").attr('checked', 'checked');
jQuery("#btn_03").trigger("change");
jQuery(".class input[type='radio']").live("change", function($) {
alert("clicked");
});
});
You need to assign the event handler before you trigger the event.
When you are actually triggering the event, you still haven't attached any listeners for that event. You are doing that in the next line. Thus the event change does get triggered but nothing happens on that event.
You can do it this way
jQuery(document).ready(function($) {
jQuery("#btn_03").attr('checked', 'checked');
jQuery(".class input[type='radio']").on("change", function($) {
alert("clicked");
});
jQuery("#btn_03").trigger("change");
});
Also use "on" to bind events instead of "live" as per the latest jQuery documentation
You need to trigger event after you attach event handler:
jQuery(".class input[type='radio']").on("change", function(e) {
alert("clicked");
});
jQuery("#btn_03").prop('checked', true).trigger("change");
Also use $.fn.on instead of long time ago deprecated $.fn.live. And it's better to set checked property instead of attribute.
You need to hook the change event before you actually call the change event. I've included a fiddle of the functionality you requested.
I've changed the change-event target to be the actual radio input since I did not have your html, but normally you would most likely want to use the name of the radio group to hook the event to, since those are usually coupled with a single behaviour - like so $("input[name='radioName']").change(function(){ // Change event code });
Sidenote: You can use '$' instead of of 'jQuery' to start an expression.
http://jsfiddle.net/du58fo3t/
$(document).ready(function() {
$("#btn_03").attr('checked', true); // Check radio button
// Hook change event on radio button
$("#btn_03").change(function() {
alert("clicked");
});
// Trigger change on radio button
$("#btn_03").trigger("change");
});
I am appendend a hyperlink to the html page using append() method, It is a list of hyperlinks, and I get all other elements id by this.id, but am not able for the appended row, why this happening? is there any other way to append ??
thanks in advance
It sounds like somewhere in your code you have this:
$("selector for links").on("click", function() {
// Using this.id here
return false; // Since they're links I assume you do this or e.preventDefault();
});
and after that code runs, you add another link, but clicking it doesn't trigger the handler above. That's because the code above hooks the event on the elements that exist as of when it runs; since the link you add didn't exist, its click event didn't get hooked.
You can use event delegation to solve this, by changing the code above to:
$("selector for container").on("click", "selector for links", function() {
// Using this.id here
return false;
});
That hooks click on a container that holds the links, but fires the handler as though the event had been hooked on individual links. So since the event is hooked on the container, you get the event even when you add new links.
Concrete example:
$(document).on("click", "a", function() {
alert(this.id);
return false;
});
I try to disable the binded click event in jquery, but I can found only to unbind or off the event click. If I do unbind() I can't get back those binded functions back.
For eg: I have a three div binded various function with click event. In some case I dont want particular div click event. So I try to disable that event only can't try to unbind() or off() the event. If I unbind() the event from div then again I need to bind those functions back to that div. See fiddle
Is there a way to disable the event and enable back those events without unbinding it.
Thanks in advance.
You can stop event like this:
function handler(e){
if(yourcondition)
e.preventDefault();
else {
}
}
You can give a class name to those div's. And call the click event though this class name like
$(".class_name").click(function(){ });
and when you want to disable the click event then use the id selector to remove the class
$("#div_id").removeClass("class_name");
and when you want to add the click event then then use the id selector to add the class
$("#div_id").addClass("class_name");
in this example
http://jsfiddle.net/prollygeek/WuNGJ/2/
you can remove class pointer from all elements so that no element will respond to any bound action , once you trun back the class , it will respond normally , class binding and unbining can be done by clicking div 1.
$(".element").on('click',function(){
if($(this).hasClass("triggered"))
{
$(".element").addClass('pointer');
$(this).removeClass("triggered");
}
else if($(this).hasClass("pointer"))
{
$(".pointer").removeClass("pointer");
$(this).addClass("triggered");
}
//do whatever
})
Im trying to remove a row. But i can't figure it out really.
First of all I've got a button that'll add a new row, that works.
But I want to give the user the possibility to remove the just added row.
The row has an 'div' inside what acts as an deletebutton. But the deletebutton doesn't work?
I'm I missing something?
Greet,
Juki
function addrow() {
$("#container").append("<div id=\"row_added\"><div class=\"deletebutton\" id=\"delbuttonnumber\"></div><div id=\"addedcolor\" class=\"colorcube\"></div></div>");
}
// deleterow the row
$(".deletebutton").click(function() {
rowclrid = "#" + $(this).parent().attr("id");
$(rowclrid).remove();
});
My guess is that you have assigned the click handler before adding the new content, so the handler is not attached to this particular element. You can use .delegate() to listen for events on all elements below a particular parent element, whether or not they already exist:
$('#container').delegate('.deletebutton', 'click', function(){
$(this).parent().remove();
});
This listens for all click events that happen inside the element #container using a feature of the DOM called event bubbling, then checks to see if they happened on a .deletebutton element, and, if so, calls the handler.
Note also the simplified code inside the handler.
I think what you need to do is use the live method. This will add the events for any new item that is added to the DOM, not just the ones that exist when you set the click handler.
// deleterow the row
$(".deletebutton").live('click', function() {
$(this).parent().remove();
});
You also don't need to get the row by getting the ID - it's simpler in the way above.
I'm having a problem. Basically, when a user clicks an 'Edit' link on a page, the following Jquery code runs:
$("#saveBtn").click(function () {
saveQuestion(id);
});
By doing this, the onClick event of the save button calls the saveQuestion() method and passes on the ID of the question for which the 'Edit' link was clicked.
But if in the same session the user clicks edit on 2 questions, then instead of overwriting the previous click event handler, it instead causes 2 event handlers to run, one which might call saveQuestion(1) and the other might call saveQuestion(2). By doing this 1 question overwrites the other.
Is there a way to remove all previous click events that have been assigned to a button?
You would use off() to remove an event like so:
$("#saveBtn").off("click");
but this will remove all click events bound to this element. If the function with SaveQuestion is the only event bound then the above will do it. If not do the following:
$("#saveBtn").off("click").click(function() { saveQuestion(id); });
Is there a way to remove all previous click events that have been assigned to a button?
$('#saveBtn').unbind('click').click(function(){saveQuestion(id)});
$('#saveBtn').off('click').click(function(){saveQuestion(id)});
If you used...
$(function(){
function myFunc() {
// ... do something ...
};
$('#saveBtn').click(myFunc);
});
... then it will be easier to unbind later.
$('#saveBtn').off('click').on('click',function(){
saveQuestion(id)
});
Use jquery's off and on