當我點擊span時，Javascript自己隱藏父div沒有隱藏

Question

我有一個動態創建的div。他們多被創建，我需要做一個自我父躲，所以這是我做了什麼：

這個div：

<div><a href="">'+inputText+'-</a><div class="box"></div><span onclick="dismiss();">Close</span></div> 

的功能：

function dismiss() { 
    $(this).parents('div').fadeOut(); 
} 

這不是當我點擊近距離時隱藏。

Answer 1

Inside dismiss函數this引用窗口對象，而不是傳遞this作爲參數。

function dismiss(ele) { 
 
    $(ele).parents('div').fadeOut(); 
 
    console.log(this); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div><a href="">'+inputText+'-</a> 
 
    <div class="box"></div><span onclick="dismiss.bind(this);dismiss(this);">Close</span> 
 
</div>

Answer 2

您不能訪問$(this)直接進入任何功能：

所以： 通爲參：

<span onclick="dismiss(this);">Close</span> 

function dismiss(obj) { 
    $(obj).parents('div').fadeOut(); 
} 

Answer 3

而不是使用一個跨度如此，考慮使用一個按鈕。這在語義上是合適的。甚至可以將< div>更改爲<（取決於它是否爲段落）。請記住，儘管你不能在一個p中有div，所以你需要將.box div改爲span。

<div> 
    <a href="">'+inputText+'-</a> 
    <div class="box"></div> 
    <button onclick="dismiss(this);">Close</button> 
</div> 

而對於JS：

function dismiss(obj) { 
$(obj).parents('div').fadeOut(); 
return false; 
} 

Answer 4

的另一種方式，更改HTML

<div> 
    <a href="">Click</a> 
    <div class="box"></div> 
    <span id="btn">Close</span> 
</div> 

和JS

$(document).on('click','#btn', function(){ 
    $(this).parents('div').hide(); 
}); 

Fiddle