2016-11-18 83 views
0

我的.parent()選擇器不能與.hide()函數一起使用。 這是我的HTML:jQuery .parent()不會觸發隱藏

... 
<div class="overpopup"> 
    <div class="overpopup--background"> 

    </div> 
    <div class="overpopup--content"> 
     <img src="http://placehold.it/600x600?text=Overpopup"> 
    </div> 
</div> 
... 

和我的jQuery的這一部分:

$(document).ready(function() { 
    ... 
    $('.overpopup--background').click(function(){ 
     $(this).parent().hide(); 
    }); 
}); 

任何人都可以發現一個錯誤,我做?我嘗試了不同的動作,如添加CSS工作和那些工作。隱藏父母甚至在jQuery合法嗎?如果沒有,是否有一個簡單的解決方法?

+0

你在想什麼? :D ..刪除自己的父母?哈哈哈.. –

+0

@ParthTrivedi哦對不起,我沒有提到這一點。我試圖隱藏父母。這是一個固定的彈出窗口,背景灰色。我想隱藏整個事情(.overpopup),當一個點擊背景 – Niqql

+0

可能重複的[動態創建的元素的事件綁定?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically -created-elements) –

回答

1

試試這個代碼

$("body").on("click", ".overpopup--background", function() { 
    $(this).parent().hide(); 
}); 

我猜,你是通過AJAX

+0

這個工作。但是爲什麼我的代碼不能工作?不只是加載外部內容的Ajax?正確的喵喵我沒有加載任何Ajax。至少我知道... – Niqql

1

加載此元素添加一些元素到您的div上已應用點擊。

的jsfiddle與您代碼:https://jsfiddle.net/jp14u8pc/2/

它運作良好,

<div class="overpopup"> 
    <div class="overpopup--background"> 
    <p> 
     Click Me 
     </p> 
    </div> 
    <div class="overpopup--content"> 
    <img src="http://placehold.it/600x600?text=Overpopup"> 
    </div> 
</div> 
0

你的代碼工作得很好,但是你不能激活您綁定的元素上的click事件,因爲它沒有寬度和高度設置。

設置它的寬度和高度或添加一些元素,它會很好。嘗試點擊下面的紅色框,它會爲你工作。

<div class="overpopup"> 
    <div class="overpopup--background" style="width:200px; height:200px; border:1px solid red;"> 
    </div> 
    <div class="overpopup--content"> 
     <img src="http://placehold.it/600x600?text=Overpopup"> 
    </div> 
</div>  
1

$(document).ready(function() { 
 
    $('.overpopup--background').click(function(){ 
 
     $(this).parent().hide(); 
 
    }); 
 
});
div{margin:10px;} 
 
.test{background:#FCE883; padding:10px;} 
 
.overpopup{max-width:100%; height:auto; background:#333; color:#fff; padding:20px;} 
 
.overpopup--background{width:auto; padding:5px 15px; background:navy; font-size:10px} 
 
.overpopup--content{border:1px solid red; padding:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="test"> 
 
    test 
 
<div class="overpopup"> 
 
    <div class="overpopup--background"> 
 
OVERPOPUP BACKGROUND BTN 
 
    </div> 
 
    <div class="overpopup--content"> 
 
     <img src="http://placehold.it/150x150?text=Overpopup"> 
 
    </div> 
 
</div> 
 
    </div>

我看不出有什麼問題。你可以看到代碼....如果問題持續存在,讓我知道/查看你的代碼。

隱藏的父項是合法的!!!!,在jQuery中沒有像我這樣的東西。所以你可以隱藏任何元素,父母或孩子或任何元素!唯一的問題是你如何隱藏和查看該元素。因爲當你隱藏父項時,action元素(這裏是overpopup - background)也隱藏在它的父項塊中。