爲什麼我不能使用jQuery隱藏點擊元素？

我想讓div顯示和jquery和css失望。代碼不起作用：爲什麼我不能使用jQuery隱藏點擊元素？

HTML

<html> 
    <head> 

    </head> 
    <body> 
     <div class="box" id="b1"> 
      <a href="#">click to show content</a> 

      <div class="content"> 
       here is content here is content here is content 
       <div class="button" id="b2">remove content</div> 
      </div 
    </body> 
</html>

jQuery的

$(document).ready(function() { 
    $('#b1').click(function() { 

     $('.content').css({ 
      "display": "block" 
     }); 
    }); 

    $('#b2').click(function() { 

     $('.content').css({ 
      "display": "none" 
     }); 
    }); 
});

演示：http://jsfiddle.net/jTgRF/41/

來源

2012-06-24 user1477955

的類「內容」 div標籤未正確關閉。剛纔提到，雖然它不是錯誤的原因。 – HOT

問題是您不會阻止事件傳播。

當你點擊按鈕時，它實際上首先隱藏了該元素，但該事件傳播到父元素，在該元素處捕獲點擊並再次顯示。它看起來很快，看起來沒有任何事情發生，但實際上當你點擊#b2時，元素被隱藏起來，然後事件冒泡到父節點#b1，你已經附加了點擊事件監聽器來顯示內容。

因此，您需要在#b2上使用.stopPropagation()。

$(document).ready(function(){ 
    $('#b1').click(function(){ 
      $('.content').show(); 
    }); 

    $('#b2').on("click", function(e){ 
      $('.content').hide(); 
      e.stopPropagation(); 
    }); 
});

你需要做的是點擊事件傳遞給呼叫backfunction（在我的例子中聲明e），然後調用它的stopPropagation()，以確保它不會冒泡到父元素。

這裏是一個工作示例：http://jsfiddle.net/jTgRF/64/

注意我用.show()和.hide()，這是完全一樣的，你用.css()做什麼，但在我看來，更具有可讀性。

編輯：

正如他的回答注意到VENU，如果你在黑色區域中單擊爲好，不只是「顯示內容」 -text內容將顯示。解決這個問題的最簡單方法就是將div中的id =「b1」屬性與類內容一起移動，並將其放在a -element上。

看到我更新的小提琴：http://jsfiddle.net/jTgRF/65/

來源

2012-06-24 14:19:01

因爲你爲一個在dom中不可用的元素附加事件，所以事件不會附加到元素上。使用live

$('#b2').live('click', function(){ 

       $('.content').css({"display":"none"}); 
     });

附加的事件處理程序的當前選擇現在和將來匹配這，所有的元素。

編輯
1）不使用Live而使用Live作爲棄用。

2）你的CSS還有一個問題。對於box類，您已將高度設置爲150px。所以如果你點擊黑色區域，事件也會被解僱。

因此，將b2元素移到b1之外，這也將解決事件傳播到父元素。

來源

2012-06-24 14:11:40 Venu

這不是問題，該元素是在加載DOM時，它只是不顯示。問題是該事件傳播到父元素，它會立即再次顯示內容。查看我的答案以獲取更多信息。 –

@ChristoferEliasson我同意你的意見。但是他的CSS還有一個問題。他已經將箱子高度設置爲150px。所以如果你點擊黑色區域，事件也會被解僱。因此，將b2元素移到b1之外，這也會解決事件傳播到父元素。 – Venu

這是真的，因爲你可能想保持.content-element的高度，解決這個問題的最簡單方法就是將id =「b1」'移動到'a'元素。 –

您需要按一下按鈕處理程序更改爲

$('#b2').click(function(e){ 
      e.stopPropagation(); 
      $('.content').css({"display":"none"}); 
    });

您需要添加event.stopPropagation()或點擊事件將被傳播到父div和.content會被隱藏立即再次。

演示：http://jsfiddle.net/joycse06/jTgRF/56/

你應該使用jQuery .show()和.hide()顯示/隱藏元素。

來源

2012-06-24 14:19:04

Venu的anwser工作，但生活（）是depraated。

你應該使用上（）：

jQuery .on function for future elements, as .live is deprecated

代碼

$(document).ready(function(){ 
    $('#b1').click(function(){ 
     $('.content').css({"display":"block"}); 
    }); 

    $(document).on('click', '#b2', function(){ 
     $('.content').css({"display":"none"}); 
    }); 
});

希望這有助於

來源

2012-06-24 14:20:30

'.live（）'確實不贊成'.on（）'，但這不是問題。該元素在加載時在DOM中可用。問題是事件傳播。看到我的答案。 –

另外，這應該可能是對Venu的答案的評論或編輯，而不是一個新的答案。 –

爲什麼我不能使用jQuery隱藏點擊元素？

回答

相關問題