I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button.
Here is the code snippet:
$('#Organaization_Desg_modal_view_Desg_input_hover1').mouseover(function () {
$('#Organaization_Desg_view_modal_desg_name_edit_icon1').show();
});
$('#Organaization_Desg_modal_view_Desg_input_hover1').mouseout(function () {
$('#Organaization_Desg_view_modal_desg_name_edit_icon1').hide();
});
$('#Organaization_Desg_view_modal_desg_name_edit_icon1').click(function () {
$('#view_modal_edit_desg_name1').prop('disabled', false);
$('#save_view_desg_name1').show();
$('#Organaization_Desg_modal_view_Desg_input_hover1').off("mouseover"); //disables the mouseover event
});
$('#save_view_desg_name1').click(function () { // save changes to input field
$("#view_modal_edit_desg_name1").prop('disabled', true);
$('#save_view_desg_name1').hide();
$('#Organaization_Desg_modal_view_Desg_input_hover1').on("mouseover"); // this part of code is not working
});.hide{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Organaization_Desg_modal_view_Desg_input_hover1">
<input type="text" id="view_modal_edit_desg_name1" class="Organaization_Desg_input_box " disabled value="Public Relationship Officer" />
<button id="Organaization_Desg_view_modal_desg_name_edit_icon1" class="hide">click to disable mouseover</button>
</div>
<button id="save_view_desg_name1" class="hide"> click to enable mouseover</button>