隱藏事件處理程序，不會觸發

Question

我有三個div S和當第二div的display屬性變成從block到none，應觸發jQuery中的hide事件，它沒有任何反應。

HTML代碼：

<div class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" style="left: 1094.421875px; z-index: 10;"></div> 
<div class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" style="left: 389.140625px; z-index: 10; display: none; top: 216px;"></div> 
<div class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" style="left: -134px; z-index: 10;"></div> 

jQuery代碼：

$('.datetimepicker').on('hide', function() { 
    $("body").css('position', ''); 
    $("body").css('width', ''); 
}) 

Answer 1

注意的是隱藏和顯示不是標準DOM事件。 jQuery中你可以將它們綁定到任何元素，但隱藏或表明，當你隱藏或顯示的jQuery或其他方法元素事件將不會被觸發。

這樣的示例代碼通過jQuery的功能，CSS類或樣式等方法元素的

// Bind hide event to element 
 
    $('#sample_element_id').bind('hide', function() { 
 
    $('#result').append('<li style="color:red;">Hide event triggered!!!</li>'); 
 
    }); 
 

 
function test(magic) { 
 
    //clear report list 
 
    $('#result li').remove(); 
 
    
 
    if(magic) { 
 
    //The magic code to add show/hide custom event triggers 
 
    (function ($) { 
 
\t $.each(['show', 'hide'], function (i, ev) { 
 
\t  var el = $.fn[ev]; 
 
\t  $.fn[ev] = function() { 
 
\t  this.trigger(ev); 
 
\t  return el.apply(this, arguments); 
 
\t  }; 
 
\t }); 
 
    })(jQuery); 
 
    $('button').remove(); 
 
    } else { 
 
    $('button#nomagic').remove(); 
 
    } 
 
    
 
    $('#result').append('<li>Hiding with jQuery</li>'); 
 
    // Hide element using jQuery Hide method 
 
    $('#sample_element_id').hide(); 
 
    
 
    $('#sample_element_id').show(); 
 
    
 
    $('#result').append('<li>Hiding with Css display</li>'); 
 
    // Hide element using css display style 
 
    $('#sample_element_id').css('display', 'none'); 
 
    
 
    $('#sample_element_id').css('display', 'block'); 
 
    
 
    $('#result').append('<li>Hiding with adding Css class</li>'); 
 
    // Hide element using css display style 
 
    $('#sample_element_id').addClass('hidden'); 
 
    
 
    //reset test element for next test 
 
    $('#sample_element_id').removeClass('hidden'); 
 
    $('#sample_element_id').removeAttr('style'); 
 
    $('#sample_element_id').show(); 
 
    
 
}

.hidden { 
 
    display: none!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="sample_element_id">TEST</div> 
 
<hr> 
 
<button id="nomagic" onclick="test(false);">Test Without Magic Code</button> 
 
<button id="magic" onclick="test(true);">Test With Magic Code</button> 
 
<ul id="result"></ul>

變化知名度沒有觸發隱藏或顯示在jQuery的事件。

但你可以用一個神奇的JavaScript代碼添加此事件的jQuery。然後調用jQuery的隱藏和顯示方法，綁定的事件將被觸發。查看此sample code瞭解更多詳情。