1

var onEnableHelpCheckChange = function() {

        // Checking weather checkbox is checked
        if ($("#enable-help").prop('checked') === true) {

            $('#nav-help-img').attr('src','/assets/images/help-1.png');
            appendPreviousImages();

            // bind custom context menu
            $('#helpDiv').on("mousedown", function (event) {
                if(isAnyPopOver2Visible){
                    if(!$(this).closest('#popover-output-div').length){
                        $('.helpBtn').popover('hide');

                    }
                    isAnyPopOver2Visible = false;
                }
            });

        }
   };
<div class="popover-output popover font-size-9pt" id="popover-output-div">
  <label id="lbl-output-help"></label>
  <textarea class="resize-none font-size-9pt width-400px" rows="6" id="txt-output-help" hidden></textarea>
  <div class="row font-size-8pt popover-footer">
    <a href="javascript:void(0);" id="btn-edit" onclick="BusinessPortal.Help.editHelpText();">Edit</a>
    <a class="padding-left-10px" href="javascript:void(0);" id="btn-remove" onclick="BusinessPortal.Help.removeHelpPopover();">Remove</a>
    <a href="javascript:void(0);" id="editable-save" onclick="BusinessPortal.Help.saveEditedHelpText();" hidden>Save</a>
  </div>
</div>

I have below code to hide the popover and button. But the problem is even if i click on the buttons on the popover it get hide.

What i want to do is show the popover when hoved and hide the popover with mousedown event. But it should not hide when i click on the popover.

$('#helpDiv').on("mousedown", function (event) {
    $('.helpBtn').popover('hide');
});
Ryan
  • 7,227
  • 5
  • 29
  • 40

1 Answers1

0

You can use .closest() along with popup element selector to check if clicked in popup window or not. if not then only hide the popup:

$('#helpDiv').on("mousedown", function (e) {
if(!$(e.target).closest('#popover-output-div').length)
   $('.helpBtn').popover('hide');
});
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125