onclick也在onclick所使用的其他元素之内

Question

There is such question here, but I tried solution and in my case this doesn't work. I have a form that opens by click on it and then it must be closed by clicking x that is inside this form. This variant doesn't fit, because cookie doesn't sets to on after closing form. If I open set it on close click This doesn't works too because click on x calls click event of all form. If I do like in solution, I find in stackoverflow the form doesn't opens at all. Here is my js code:

$(document).ready(function () {
    if ($.cookie('techSupport') == null) {
        $.cookie('techSupport', 'off');
    } else if ($.cookie('techSupport') == 'on') {
        $.cookie('techSupport', 'off');
    };
}).on("click", "div#techSupport", function (event) {
    if ($.cookie("techSupport") == 'off') {
        $.cookie("techSupport", "on");
        var res = "<nobr><div>Technical support<a href='#' id='closeChat'>x</a></div></nobr>\n" +
            "<div id='chatBox'>What's your probloem?</div>\n" +
            "<textarea id='messageBox'></textarea>\n" +
            "<button id='sendToSupport'>Send</button>";
        $(this).css("width", "200px");
        $(this).css("height", "400px");
        $(this).html(res);
    }
}).on("click", "div#techSupport,a#closeChat", function () {
    var res = "<div id='techSupport'>techsupport</div>";
    $("div#techSupport").html(res);
    $("div#techSupport").css("width", "100px");
    $("div#techSupport").css("height", "10px");
    console.log($("div#techSupport").html());
    $.cookie("techSupport","off");
    event.stopPropagation();
    //window.location.reload();
});

HTML:

<div id="techSupport">techsupport</div>

So how can I click on cross ignoring the main form?

Answer 1

You have two options here, stop the propagation of the event in onclick of a#closeChat (note I also added the e parameter at your handler):

.on("click", "a#closeChat", function (e) {
    var res = "<div id='techSupport'>techsupport</div>";
    $("div#techSupport").html(res);
    $("div#techSupport").css("width", "100px");
    $("div#techSupport").css("height", "10px");
    console.log($("div#techSupport").html());
    $.cookie("techSupport","off");
    e.stopPropagation();
    //window.location.reload();
});

http://jsfiddle.net/d6fpfzsu/10/

OR

Inspect the target property of the event on the div#techSupport handler:

if ($.cookie("techSupport") == 'off' && event.target.id != 'closeChat') {
    $.cookie("techSupport", "on");
    var res = "<nobr><div>Technical support<a href='#' id='closeChat'>x</a></div></nobr>\n" +
        "<div id='chatBox'>What's your probloem?</div>\n" +
        "<textarea id='messageBox'></textarea>\n" +
        "<button id='sendToSupport'>Send</button>";
    $(this).css("width", "200px");
    $(this).css("height", "400px");
    $(this).html(res);
}

http://jsfiddle.net/d6fpfzsu/11/

The best solution will depend on each use case.