Reseting a button action if user starts doing something else

Question

I have a <button> that when clicked, toggles a series of div's that allows a user to delete a page.

I am trying to make it so if the user does anything else that doesn't involve deleting a page, the button reset's and the series of div's disappear.

Could anyone help me?

Here is my jsfiddle - Basically, when I click show "Show Buttons", I want the buttons to show like they do. But I click on anything else but the buttons that appear (delete-page), I want the buttons to disappear again. Like a bootstrap dropdown toggle works.

//this is the button to activate the showing of the delete buttons
$('button.delete-pages').click(function (e) {
    var btn = $(this);
    //this hows the delete buttons that a user can click
    $('button.delete-page').toggleClass('active');

    //this just makes the button looked pushed down
btn.toggleClass('active');
});

.show { display:block; }

All the buttons are in this content in the body

<div style="width:100%;border-bottom:1px solid black;">
  <button class="delete-pages">Show Buttons</button>
</div>

<ul id="projectPageList">
     <li id="page_1">
        <button style="float:right;" class="delete-page">
            <i class="fa fa-trash-o"></i>
        </button>
        <a class="page" href="#page1">Page 1</a>
     </li>
      <li id="page_2">
        <button style="float:right;" class="delete-page">
            <i class="fa fa-trash-o"></i>
        </button>
        <a class="page" href="#page2">Page 2</a>
     </li> 
      <li id="page_3">
        <button style="float:right;" class="delete-page">
            <i class="fa fa-trash-o"></i>
        </button>
        <a class="page" href="#page3">Page3</a>
     </li> 
</ul>

Its not clear where "when user does anything else" what like click another button? can u make a [fiddle](http://jsfiddle.net/)? — shyamnathan, Feb 18 '14 at 17:50
@shyamnathan I guess I could. I basically meen if a user clicks on anything other than the delete-page buttons, everything goes back to the way it was before the show-delete button was pushed — bryan, Feb 18 '14 at 19:35
@shyamnathan here is the jsfiddle http://jsfiddle.net/HR8xD/ — bryan, Feb 18 '14 at 20:24

score 1 · Answer 1 · edited May 23 '17 at 12:28

I hope this fiddle solves your problem.

$(document).mouseup(function (e) {
var delBtn = $(".delete-page");
var tglBtn = $(".delete-pages");

if (!delBtn.is(e.target) && !tglBtn.is(e.target) 
    && (delBtn.has(e.target).length === 0) && (tglBtn.has(e.target).length === 0)) {
    delBtn.removeClass('active');
    tglBtn.removeClass('active');
}
});

I had the idea from this stackoverflow answer.

By finding the position of mouse click we are hiding the delete buttons but I must warn you this does not handle the keyboard actions.

Reseting a button action if user starts doing something else

1 Answers1