Passing a secondary event to a nested click event? jQuery - javascript

Really stuck on this problem I am having.
The problem :
I have a button which will trigger a reorder method. This reorder method is dependant on the click event that is binded to the reorder button.
I want to add a confirm step using a overlay, inside the overlay there is a confirm button which will then pass the original button event.
'reorder-overlay-confirmation': function (event) {
var self = this;
$(self).find('.reorder-confirm-btn').click(function (e, event) {
e.preventDefault();
_reorder(event);
});
},
How can I pass the initial event into the confirmation button.
I tried passing it as an argument but it is null whenever it calls the _reorder() method.
How can I pass the first click event as an argument of my second confirmation click event?
Note : I cannot use jQuery confirm as there is some overlay functionality existing that I must use.
Thanks

You could pass it as extra parameter in the event data so it will be accessed via e.data like :
$(self).on('click', '.reorder-confirm-btn', { first_event: event }, function (e) {
e.preventDefault();
_reorder(e.data.first_event);
});
Hope this helps.

Related

Change binding on event for button using jQuery

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.

How to prevent div.click event when another element clicked

I want to prevent click event but e.stopPropagation() doesn't work.
I'm trying to write something like Jtable . I use div as pagination buttons(1) and another element is delete button.
I need to disable pagination buttons when delete confirmation box is popping up . After click del or cancel "I want my pagination buttons work again".
Is there any solution?
function deleteit() {
$(".del").click(function() {
$(".divbutton").click(function(e) {
alert(1);
e.stopPropagation();
});
}
$(".deletebtn").click(function() {
deleteit();
});
$(".divbutton").click(function() { // I want to prevent this from click
//ajax send and display data
});
I know that I should use input disabled instead of div, but I need to use div.
edit:add image to make it understandable.
Instead of preventing the click handler... remove the registered handler using .off(), here namespaced event name is used because we want to remove only a very specific handler
function deleteit() {
$(".del").click(function () {
$(".divbutton").off('click.delete')
})
}
$(".deletebtn").click(function () {
deleteit();
});
$(".divbutton").on('click.delete', function () { // I want to prevent this from click
//ajax send and display data
});
Why your code is not working? because stopping propagation will prevent the bubbling up of the event but in your case both the event are registered to the divbutton so both of them will get triggered even if propagation is prevented.
Another way is to use stopImmediatePropagation() even that is not possible here because your delete registers the handler later and it will get executed only after the first one is called

I can't prevent a button click event on JQuery

I have a button that clears a list, the click on this button shows a dialog that asks for validation (Yes/No). What I want is to disable the "Clear" button after clearing the list (Click on Yes). Here's my code :
$('#clearBtn').click(function() {
$('#alert5').show();
$('#bg').show();
$('#Yes').click(function(){
$('.list1').empty();
$('#clearBtn').disable(true);
$('#clearBtn').click(function(e){
e.preventDefault();
});
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
});
the preventDefault() function doesn't seem to work.
First never nest event handlers.
$('#cleatBtn').click(function () {
$('#alert5').show();
$('#bg').show();
});
$('#Yes').click(function () {
$('.list1').empty();
$('#cleatBtn').attr('disabled', true);
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
If you just want to disable then use the following syntax
$('#cleatBtn').attr('disabled', true);
Remove the innermost event completely.. That is not required.
Use on to bind the events, if you want the button to be enabled but turn off the event handler using off
One more option you have is to apply a class to the button when you press yes and execute the code only when the class is not present.
$('#cleatBtn').click(function () {
if( !$(this).hasClass('active')) {
$('#alert5').show();
$('#bg').show();
}
});
$('#Yes').click(function () {
$('.list1').empty();
$('#cleatBtn').attr('disabled', true);
$('#cleatBtn').addClass('active');
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
To disable a button, call the prop function with the argument true on it:
$('#cleatBtn').prop("disabled", true);
e.preventDefault(); is the correct way of cancelling events. Some older browsers also expect a return type of false. Which I think will cause jQuery to call preventDefault()?
Here's a good answer: What's the effect of adding 'return false' to a click event listener?
I think your structure looks a bit odd. you don't need to attach click events within a click event.
Just attach them all separately on document.ready events. At the moment they are nested, then go back to trying to cancel your event. The dom tree might be confused by the way the events are nested.
Hope that helps.

Raphael JS - disable HREF in the drawing

I am using Rapheael to draw a control Dashboard. Right now I am adding a hyperlink object into the Dashboard editor. It is a text with the HREF attribute.
When I add the element and click on it, it opens the link. Is there some way to temporarly disable the link?
When I click the other elements, it opens the property dialog. I would like that also with the Hyperlink object.
I've tried adding return:false, but didn't help:
obj.dblclick(function (event) {
jQuery('##divProperties').dialog('open');
return false;
});
Returning false is a way to cancel events with more traditional event binding, e.g.
obj.onclick = function() { return false }
or
<a onclick="return false;"></a>
But it doesn't work with jQuery event bindings.
To do that, you need to call the .preventDefault() method on the event object, which is passed to the event handler:
obj.dblclick(function (event) {
jQuery('##divProperties').dialog('open');
event.preventDefault();
});
You may want to prevent default on the click event also if you're capturing double click so it doesn't get fired either.

How to remove all click event handlers using jQuery?

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

Categories

Resources