Select entire element except specific element inside main

Question

So, I have the main div (modal-container) which taking a full page and inside the main div and having another div (modal-inner) with two buttons. The main DIV was set to full height/width of the page and inside DIV (modal-inner) having calc(100% - 40px) width of screen.

Through Jquery I have added two functions on each button click event, like jq-button-ok & jq-button-cancel. Now when I try to add a click event into a modal-container but its call two buttons click function too at the same time. What would be the solution?

HTML:

<div class="modal-container" role="dialog">
    <div class="modal-inner" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button class="button jq-button-ok">OK</button>
                <button class="button jq-button-cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

CSS:

.modal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 102;
    background: rgba(216,216,216,.25);
    transition: 0.3s opacity ease-in;
    opacity: 1;
}

.modal-inner {
    position: static;
    width: 500px;
    height: auto;
    max-width: calc(100% - 20px);
    transition: none;
    transform: none;
}

Jquery:

$(document).ready(function () {

        $("body").on("click", ".jq-button-ok", function (e) {
            e.preventDefault();
            callfunstionone();
        });

        $("body").on("click", ".jq-button-cancel", function (e) {
            e.preventDefault();
            callfunstiontwo();
        });

        $("body").on("click", ".modal-container:not(.modal-inner)", function (e) {
            callfunstionfour();
        });

    });

Answer 1

Instead of registering multiple

$("body").on("click", ...

events, just register the stuff you actually need. Also you can use

e.stopPropagation();

to stop bubbling:

$(".jq-button-ok").on("click", function (e) {
    e.stopPropagation();
    callfunstionone();
});

$(".jq-button-cancel").on("click", function (e) {
    e.stopPropagation();
    callfunstiontwo();
});

$(".modal-container").on("click", function (e) {
    callfunstionfour();
});

---

JSFiddle Demo