on-click function JavaScript trigger twice - javascript

I can't figure out why 'onClick' function trigged twice.
My html code:
<div class="form-actions right1">
<button type="button" id="btnCancel" class="btn default">
Cancel
</button>
<button type="submit" id="btnSubmit" class="btn blue">
Submit
</button>
</div>
Script is here:
$("#btnSubmit").on("click",function () {
debugger;
alert("Click");
CreateOfficeTypeManager.SaveOfficeType();
});

You might be binding the "click" even twice.
Put a breakpoint in your $("#btnSubmit")... instruction and see if it goes there twice.
Otherwise, try unbinding as shown here button onclick function firing twice
Finally, if you're in a complex environment, there might be other code handling the clicks for you. Try preventDefault as suggested in the comments of your question.

It works fine.
$("#btnSubmit").on("click",function () {
debugger;
alert("Click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-actions right1">
<button type="button" id="btnCancel" class="btn default">
Cancel
</button>
<button type="submit" id="btnSubmit" class="btn blue">
Submit
</button>
</div>

Related

Why I can apply JS/Jquery function to a button specific ID, but can't link to his class?

I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.
You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

how to increase performance of onclick popup in javascript

I have to open a popup window when I click on a button, it is displaying but taking time. How can I overcome this problem so that it takes less time? I am calling a function when I click on the save button.
Save
Cancel
Delete
This is the code for the save button. When I click on this button the lessonsave function will be called, although it is taking longer than I would like it to.
<div class="col-sm-12 form-group fall-footer" style="margin-top: 35px;">
<sapn class="pull-right">
<button type="button" id="refresh" class="btn btn-save" onclick="LessonSave()">Save</button>
<button type="button" class="btn btn-cancel" id="historyLesson_Cancel">Cancel</button>
<sec:authorize access="#mySecurityService.hasPermissions('delete','46')">
<button type="button" id="h_lessondelete" class="btn btn-save" onclick="HistoryLessonDelete()">Delete</button>
</sec:authorize>
</sapn>
</div>
<script>
function LessonSave() {
$("#h_cmts").val("");
$("#h_curriculumtypemodel").modal("show");
}
</script>

Pressing enter on child modal dialog fires enter on parent modal dialog (ie11 and edge)

I have two bootstrap modal dialog windows, one creates the other. When enter is pressed on the child's text input it fires an event on the parent as well. The last button to have focus on the parent was the one to create the child, this causes the child to be recreated immediately.
I have found some similar problems which state to make sure the ok buttons on the dialog are of type=button since they default to submit. I have made sure that the buttons have the type of button but the issue persists, though it works fine in chrome.
Here an example of what is happening in plunker.
This is the first modal window.
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="shownewwindow()">New Modal</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
And here is the second.
<script type="text/ng-template" id="modal2.html">
<div class="modal-body">
<input type=textarea value="test" ng-keypress="keydown($event)" autofocus></input>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="ok()">ok</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Here are the functions for ok, cancel, and keydown.
$scope.ok = function () {
console.log("ok");
$uibModalInstance.dismiss({completed: true});
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.keydown = function(event) {
var enterKeyCode = 13;
$uibModalInstance.dismiss({completed: true});
}
Any ideas on how to prevent the child from being created repeatedly when enter is pressed would be appreciated, thanks.
Try to disable the button when you click on it.
<button ng-disabled="aScopeVar" ng-click="setAScopeVarToTrue()">My button</button>
Don't forget to set aScopeVar to true after the child is created.

Moving element from one div to another

Here is my live demo: https://jsfiddle.net/johndoe1992/3uqg7y9L/
When I click some button on the left panel it must be cloned to the right panel (see live demo)
The bootstrap class 'disable' must be added on click to this button from the left panel too. We have the disabled button on the left and the enabled button on the right
When I click some button on the right panel it must relocate back to the left panel (see live demo)
We have the enabled button on the left and no button on the right
I've tried to find a solution using this, which works for #1 and #2, but I have no idea what to do with #3
$(this).clone().appendTo('.selected');
$(this).prop('disabled', true);
Thank you for your help
Firstly you need to use a delegated event handler to handle clicks on the buttons you dynamically add to the .selected div.
Secondly you need to add a way of identifying which button was clicked on in the .selected div and matching that with the original in the .base div. To do that you could use a data attribute. From there you can just set the disabled property state and remove() the clone. Something like this:
<div class="base">
<button type="button" class="btn btn-default" data-state="default">Text 1</button>
<button type="button" class="btn btn-primary" data-state="primary">Text 2</button>
<button type="button" class="btn btn-info" data-state="info">Text 3</button>
<button type="button" class="btn btn-warning" data-state="warning">Text 4</button>
<button type="button" class="btn btn-success" data-state="success">Text 5</button>
<button type="button" class="btn btn-danger" data-state="danger">Text 6</button>
</div>
<div class="selected"></div>
$(document).on('click', '.btn', function() {
if($(this).parent().attr("class") == "base") {
$(this).clone().appendTo('.selected');
$(this).prop('disabled', true);
}
else {
$('.base').find('[data-state="' + $(this).data('state') + '"]').prop('disabled', false);
$(this).remove();
}
});
Updated fiddle

universal button self add class

is it posible to make a universal jquery for basically all buttons in my code with diferent ids? i cant seem to get this to work. what im trying to achieve is everytime a button is clicked the javascript will add a class for that specific button that was clicked.
HTML :
<button type="button" onClick="myFunction(this.id)" id="test1" class="btn btn-primary btn-xs pull-right">button 1</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
JS :
function myFunction(this) {
$(this).addClass("animated flipInY");
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
}
You can use click event with button selector and it will work for all your button :
$('button').on('click', function(){
$(this).addClass('animated flipInY');
}
Hope this helps.
I think the problem you have is more related with calling the "removeClass" for all buttons...
For that you need to change
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
to
setTimeout(function(){
$('button').removeClass("animated flipInY")
},1000);
in your code (or better add it to Zakaria answer).

Categories