2012-11-24 122 views
0

可能重複:
Detect click outside element?要隱藏當點擊超出這個div,排除任何點擊裏面

我試着去隱藏一個div當焦點(點擊)是外面,但是其中有一些元素,而不是在所有這些元素上執行e.target.id是否有包含所有元素的方法?我明白我的意思嗎?

編輯:我嘗試hide#contain_name當有人clicknewsletter

的jsfiddle外:demo

<div id="newsletter"> 
    <form action="#" class="form-post"> 
        <div class="clearfix"> 
            <input type="text" id="email" name="email" placeholder="email" /> 
            <button id="fake">Send</button> 
        </div> 
        <div id="contain_name" class="clearfix"> 
            <input type="text" id="person_name" placeholder="full name" /> 
            <button id="real_button">Send</button> 
        </div> 
    </form> 
</div> 


$('#email').focus(function() { 
    $('#fake').fadeOut(); 
    $('#contain_name').slideDown(); 
}); 

$(document).on('click', function(){ 
    //do something here 
}); 
+0

哪個DIV你指的是? –

+0

@FrançoisWahl我認爲這篇文章對於任何試圖學習這個東西的人都有一些有價值的答案,並且有點不同。 –

+0

@ Dejan.S:這是一個重複的問題,答案也幾乎相同。一個使用'$(...)[0]'檢查,而另一個使用'$(...).length'。它們有相同的區別,它們都在執行相關代碼段之前檢查jQuery選擇器是否匹配。由於jQuery的工作原因,你學到的任何額外內容都會增加答案的價值,但仍然會使問題重複出現。 – Nope

回答

0

這?

$(document).on('click', function (e) { 
    if (!$(e.target).closest('#newsletter')[0]) { 
     $('#contain_name').hide(); 
    } 
}); 

現場演示:http://jsfiddle.net/FUDLk/11/

+0

不會工作,http://jsfiddle.net/FUDLk/9/ –

+0

@ Dejan.S你忘了定義參數'e'。工作演示:http://jsfiddle.net/FUDLk/11/ –

+0

哦,我:),護理解釋爲什麼你使用'數組[0]'這裏和它做什麼? –

2
$(document).on('click', function(e){ 
    if (e.target !== $("#excludedDiv")[0]) { 
     // do something there 
    } 
}); 
+0

+1,對不起,我沒注意到誰第一次去。 –

+0

沒問題哈哈 –