Develop Reference

preventDefault works only once?

this trigger works correctly ONE time. If it fires again, it just refreshes my page, so I’m guessing that the preventDefault isn’t working. Am I missing something?
function watchForm() {
$(‘form’).submit(event => { //listening for event on the form pop-up menu
event.preventDefault(); //suppresses browser from going to a linked page.
$(’#js-error-message’).empty();
let searchState = $(’#js-stateMenuForm :selected’).val();
getParks(searchState); //calls getParks function.
});
}

Rewrite your function to this below and see if it works:
function watchForm(){
// for every form on the page
$('form').on('submit', function(e){
// empty the error element
$('#js-error-message').empty();
var searchState = $('#js-stateMenuForm :selected').val();
// call the function that uses the value you are looking forward to.
getParks(searchState);
// where e is the event
e.preventDefault();
return false; // force return of the form's submission
});
}
Also, you can check this post: Jquery .on() submit event

Double-click prevention on save

I have a kendo grid with its dataSource, the grid has an editor dialogue with save button. I need to prevent the save button being double clicked. The onsave functions fire when the save button is clicked. I have a requestEnd event that fires when the save is to be re-enabled.
The problem: onSave1 looks to fail 1 time in 100 . It's based on adding an additional click handler, invoking preventDefault(). Is it fundamentally flawed?
Is onSave2 any better?
onSave1: function (e) {
$(event.srcElement)
.addClass("k-state-disabled")
.bind("click", disable = function (e) { e.preventDefault(); return false; })
this.dataSource.one("requestEnd", function () {
$("[data-role=window] .k-grid-update")
.off("click", disable)
.removeClass("k-state-disabled");
})
}
onSave2: function (e) {
$(event.srcElement)
.removeClass(".k-grid-update")
.addClass("k-state-disabled")
.addClass("disabledMarker");
this.dataSource.one("requestEnd", function () {
$("[data-role=window] .disabledMarker")
.addClass(".k-grid-update")
.removeClass("k-state-disabled")
.removeClass("disabledMarker");
})
}

First Jquery bind has been deprecated since version 3.0 so I would recommend not using it anymore. http://api.jquery.com/bind/
You do not need an onClick event or in your case bind because onSave is already being called during the click. So simply disable the button onSave. Second you should use complete or whatever kendo grid uses for when the save event is finished instead or requestEnd. Code listed below.
onSave: {$(event.srcElement)addClass("k-state-disabled")}, complete:{ $(event.srcElement)removeClass("k-state-disabled")};

Assigning click event handler inside keyup event causes the click event to be fired multiple times

I am attempting to add an event handler to an anchor only when certain form fields are populated, like so:
$('#newName, #newFrom').keyup(function (e) {
if ($('#newName').val() || $('#newFrom').val()) {
$('#add-person').click(function (e) {
//Handle event, includes adding a row to a table.
$('this').off();
});
}
});
It seems like the first event is getting propagated to the second one since I end up with the same number of rows in my table as keys I have typed.
I've tried adding
e.stopPropagation();
But with no success.

$('this').off(); should be $(this).off();
also probably you'd better go using the input event instead of keyup. input event will trigger even if one pastes content into your fields.
nevertheless I'd go the other way around:
// (cache your selectors)
var $newName = $("#newName"),
$newFrom = $("#newFrom");
// create a boolean flag
var haveNewValue = false;
// modify that flag on fields `input`
$newName.add( $newFrom ).on("input", function() {
haveNewValue = ($.trim($newName.val()) + $.trim($newFrom.val())).length > 0;
});
// than inside the click test your flag
$('#add-person').click(function (e) {
if(!haveNewValue) return; // exit function if no entered value.
// do stuff like adding row to table
});
What was wrong:
on every keyup you was assigning a new (therefore multiple) click event/s to the button, but the (corrected to:) $(this).off() was triggered only after an actual button click.
Also a better way to use .on() and off.() (notice the difference in using the .click() method and the .on() method) is:
function doCoffee() {
alert("Bzzzzzzzz...BLURGGUZRGUZRGUZRG");
}
$("#doCoffeeButton").on("click", doCoffee); // Register "event" using .on()
$("#bossAlertButton").click(function() {
$("#doCoffeeButton").off("click"); // Turn off "event" using .off()
});

jquery event handler for different element on different action

I am using jquery , in my project i have same action for form submit and for hyperlink click event. Code is same for both action , but i need to write separate event handler as follows
$("#elem1").click( //do some action ) and
$("#form1").submit(//do some action )
can we write mixed event handler for both in one line ?

Just create a function and pass it as a reference to your handlers:
function myHandler(event) {
//do some action
};
$('#elem1').on('click', myHandler);
$('#form1').on('submit', myHandler);

Use .trigger to call the other event's code:
$("#form1").submit(function() { /* do some action */ } );
$("#elem1").click(function() { $('#form1').trigger('submit'); } );
However, if #elem1 is the submit button for #form1, you don't need to do this, as it will run the code twice in a row.

How enable a click event of a button?

I disable a jQuery click event with:
$("#button").click( function () { return false;}
How can I enable it? The intention is avoid double clicks and run multiple times the function that triggers.
I want to restore the event when other button was pushed.

There's a couple options, but I like the following best:
//disable
$("#button").bind('click', function() { return false; });
//enable
$("#button").unbind('click');
You could also bind click again on the button to some other callback function as well. Lastly, I might suggest calling preventDefault on the event from a click event, depending on what #button really is like so:
$("#button").bind('click', function(e) {
e.preventDefault();
return false;
});
As j08691 pointed out, as of jQuery 1.7 on, it should look like:
$("#button").on('click', function(e) {
e.preventDefault();
return false;
});

You could also use one:
$("#button").one('click', function () { /* code here */ });
The event will unbind itself after being called once.

If you do:
$("#button").unbind("click");
the button will be working again, the unbind function erases registered events handlers from the selected element, if you dont pass it an argument it will erase all events registered.
EDIT: as noted in the comments, you can use now the on and off methods:
$("#button").off("click")
to disable clicks and:
$("#button").on("click")
to enable them again