Question

我有三个div s，当第二个div的{{1}}属性从display变为block时，会触发中的none事件，它没有任何响应。

HTML code：

hide

jQuery代码：

<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>

Answer 1

注意 hide 和 show 不是标准的DOM事件。在jQuery中，您可以将它们绑定到任何元素，但是当您通过jQuery或其他方法隐藏或显示元素时，隐藏或 show 事件将不会被触发。
/>像这个示例代码

  // 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 ($) {
	  $.each(['show', 'hide'], function (i, ev) {
	    var el = $.fn[ev];
	    $.fn[ev] = function () {
	      this.trigger(ev);
	      return el.apply(this, arguments);
	    };
	  });
    })(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函数，css类或样式更改元素的可见性，并且其他方法未在jQuery中触发隐藏或显示事件。

但是你可以用一个神奇的javascript代码将这个事件添加到jQuery中。然后通过调用jQuery hide 和 show 方法，将触发绑定事件。查看此sample code了解详情。

不触发隐藏事件处理程序

1 个答案: