Mouse-up event goes wrong

Question

Here my code:

<div class="container" role="main">
    <li><a href="javascript:void(0);" onclick="showAssignLabelsInMain(this);">Assign Labels</a></li>
    <div class="labelListInMain" id="labelListInMain">
        <g:render template=""/>
    </div>
</div>

function showAssignLabelsInMain(elm) {
        $.ajax({type: 'POST',
            url: '${createLink(controller: "HRAdmin", action: "labelListInMain")}',
            success: function (data, textStatus) {
                $('#labelListInMain').html(data);
            }
        });
        var offset = $(elm).offset();
        $("#labelListInMain").css({top: offset.top + 25, left: offset.left - 18, position: 'absolute'});
        $('#labelListInMain').toggle('fast');

$(".container").mouseup(function (e) {
        var subject = $("#labelListInMain");
        alert(e.target.id)

        if (e.target.id != subject.attr('id')) {
            subject.fadeOut();
        }
    });

It means that when I clicked the button, toggle will show up, but when I click inside that toggle, it fades out. It is not supposed to fade out and I don't know what's wrong.

you forgot to add EOS(end of statement) in your `alert(e.target.id)` — CodeSlayer, Jul 31 '14 at 05:50

score 1 · Accepted Answer · answered Jul 31 '14 at 05:47

1

$(".link").click(function(e){
e.preventDefault();
$(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
 $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
 $(this).fadeOut(300);
});

Demo

Hope it works for you

answered Jul 31 '14 at 05:47

Neeraj Dubey

4,401
8
30
49

Thanks guys +1 for demo! – Tran Tam Jul 31 '14 at 06:15
Excuse me bro, Can I ask a question? $(".popup").on('blur',function(){ means that when pop u opened, click mouse inside that, blur even will not happened right? Cause I tried it on my project and when I clicked in pop up, it faded out. – Tran Tam Aug 01 '14 at 04:01
Please share your HTML or create Fiddle demo. – Neeraj Dubey Aug 01 '14 at 05:45
Here my code [link](http://jsfiddle.net/5xVg9/), I applied your code but it's not work on my project. – Tran Tam Aug 01 '14 at 08:18
Hey i have checked you Demo but it contains only your javascript part not HTML and javascript code is not mine it your which is asked in question. – Neeraj Dubey Aug 01 '14 at 13:14

Neeraj Dubey · Answer 2 · 2014-07-31T06:29:39.503

0

You can also do from another method

$(".container").click(function (e) {
    var subject = $("#labelListInMain");

    if (!$(e.target).closest('.labelListInMain').length) {
        subject.fadeOut();
    }
});

edited Jul 31 '14 at 06:29

answered Jul 31 '14 at 05:53

Neeraj Dubey

4,401
8
30
49

Well, it fades out while popup open ! – Tran Tam Jul 31 '14 at 06:25

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

Your question seems to be connected to something like this

How to have click event ONLY fire on parent DIV, not children?

you want the div to fade when the .container is clicked but not if it was toggle that was clicked right? and toggle is a child of .container try looking this up too http://api.jquery.com/children/

edited May 23 '17 at 11:44

Community

1
1

answered Jul 31 '14 at 05:54

Miu

55
10

Mouse-up event goes wrong

3 Answers3