복붙노트

[JQUERY] 사업부가 표시되어 트리거 액션에 jQuery를 이벤트

JQUERY

사업부가 표시되어 트리거 액션에 jQuery를 이벤트

해결법

  1. 1.당신은 트리거 이벤트에 레거시 코드 작업에 필요하면 당신이 뭔가를 보여줄 때마다 또는 필요가 없습니다 당신은 항상 원래 .show () 메소드에 추가 할 수 있습니다 :

    당신은 트리거 이벤트에 레거시 코드 작업에 필요하면 당신이 뭔가를 보여줄 때마다 또는 필요가 없습니다 당신은 항상 원래 .show () 메소드에 추가 할 수 있습니다 :

    jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

    jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

    이것은 효과적으로 여전히 원래 .show () 메서드의 정상적인 동작을 실행하는 동안 당신은 뭔가 beforeShow 및 afterShow을 수행 할 수 있습니다.

    원래 .show () 메소드를 오버라이드 (override) 할 필요가 없습니다 당신은 또한 다른 방법을 만들 수 있습니다.

  2. 2.문제는 DOM 돌연변이 관계자에 의해 해결되고있다. 그들은 콘텐츠, 텍스트 또는 DOM 요소의 속성을 변경의 이벤트에 관찰자 (함수)를 결합 할 수 있습니다.

    문제는 DOM 돌연변이 관계자에 의해 해결되고있다. 그들은 콘텐츠, 텍스트 또는 DOM 요소의 속성을 변경의 이벤트에 관찰자 (함수)를 결합 할 수 있습니다.

    IE11의 출시와 함께, 모든 주요 브라우저 확인,이 기능을 지원 http://caniuse.com/mutationobserver

    예제 코드는 다음과 같습니다

    () {(기능 $ $ ( '# 쇼'). ((기능을 클릭) { $ ( '#의 testdiv') 쇼 ().; }); var에 관찰자 = 새로운 MutationObserver (기능 (돌연변이) { 경고 ( '변경 속성!'); }); VAR 타겟 document.querySelector = ( '#의 testdiv'); observer.observe (타겟 { 속성 : 사실 }); });

    숨겨진 <버튼 ID = "쇼"> 숨겨진 DIV 보기 <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "https://code.jquery.com/jquery-1.9.1.min.js">

  3. 3.당신은 .trigger 기능을 사용하여 사업부 가시화 한 후에이 그러나 당신이 당신의 스크립트에서 이벤트를 트리거 할 수 있습니다에 대한에 연결할 수 네이티브 이벤트가 없습니다

    당신은 .trigger 기능을 사용하여 사업부 가시화 한 후에이 그러나 당신이 당신의 스크립트에서 이벤트를 트리거 할 수 있습니다에 대한에 연결할 수 네이티브 이벤트가 없습니다

    예컨대

    //declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});

  4. 4.당신은 jQuery의 라이브 쿼리 플러그인을 사용할 수 있습니다. 그리고 쓰기 코드는 다음과 같습니다 :

    당신은 jQuery의 라이브 쿼리 플러그인을 사용할 수 있습니다. 그리고 쓰기 코드는 다음과 같습니다 :

    $('#contentDiv:visible').livequery(function() {
    alert("do something");
});

    그런 다음 컨텐츠 사업부를 볼 때마다, "무언가를"는 경고한다!

  5. 5.redsquare의 솔루션은 정답입니다.

    redsquare의 솔루션은 정답입니다.

    그러나 IN 이론 용액대로 .visibilityCheck (모든 표시 소자)에 의해 분류 요소를 선택하는 함수를 작성하고 가시성 속성 값을 확인할 수있다; 사실이라면 뭔가.

    그 후,이 함수는 주기적 setInterval () 함수를 사용하여주십시오. 당신은 성공적으로 호출 아웃시 사항 clearInterval ()를 사용하여 타이머를 중지 할 수 있습니다.

    다음은 그 예이다 :

    function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

    당신은 또한 약간의 성능 향상을 수행 할 수 있습니다, 그러나,이 솔루션은 액션으로 사용하기 위해 기본적으로 불합리하다. 그래서...

  6. 6.(http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/에서 가져온) 다음 코드는 ( '# someDiv') $를 사용할 수 있도록 할 것이다. ( '쇼 'someFunc);

    (http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/에서 가져온) 다음 코드는 ( '# someDiv') $를 사용할 수 있도록 할 것이다. ( '쇼 'someFunc);

    (function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);

  7. 7.당신이 $ .show에 의해, 실제로 표시 만들어진 모든 요소 (및 하위 요소)에 이벤트를 트리거 할 경우, 전환, toggleClass, addClass, 또는 removeClass :

    당신이 $ .show에 의해, 실제로 표시 만들어진 모든 요소 (및 하위 요소)에 이벤트를 트리거 할 경우, 전환, toggleClass, addClass, 또는 removeClass :

    $.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

    그리고 지금 당신의 요소 :

    $("#myLazyUl").bind("show", function(){
    alert(this);
});

    당신은 ( "ATTR"같은) 상단에 배열에 추가하여 추가 jQuery를 기능에 우선 추가 할 수 있습니다

  8. 8.Glenns의 ideea의 기반으로 숨기기 / 쇼 이벤트 트리거 : 하나 개의 이벤트에 대한 2fires를 제거 토글이 표시 / 숨기기를 발생하기 때문에 우리는 원하지 않는다

    Glenns의 ideea의 기반으로 숨기기 / 쇼 이벤트 트리거 : 하나 개의 이벤트에 대한 2fires를 제거 토글이 표시 / 숨기기를 발생하기 때문에 우리는 원하지 않는다

    $(function(){
    $.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
        var _oldFn = $.fn[this];
        $.fn[this] = function(){
            var hidden = this.find(":hidden").add(this.filter(":hidden"));
            var visible = this.find(":visible").add(this.filter(":visible"));
            var result = _oldFn.apply(this, arguments);
            hidden.filter(":visible").each(function(){
                $(this).triggerHandler("show");
            });
            visible.filter(":hidden").each(function(){
                $(this).triggerHandler("hide");
            });
            return result;
        }
    });
});

  9. 9.나는이 같은 문제를 가지고 우리의 사이트를 해결하기 위해의 플러그인 jQuery를 만들었습니다.

    나는이 같은 문제를 가지고 우리의 사이트를 해결하기 위해의 플러그인 jQuery를 만들었습니다.

    https://github.com/shaunbowe/jquery.visibilityChanged

    다음은 예에 따라이를 사용하는 것이 방법입니다 :

    $('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

  10. 10.사용 jQuery를 웨이 포인트 :

    사용 jQuery를 웨이 포인트 :

    $('#contentDiv').waypoint(function() {
   alert('do something');
});

    jQuery를 웨이 포인트의 위치에 다른 예.

  11. 11.여기에서 저를 도와 것은 최근 ResizeObserver 사양 polyfill입니다 :

    여기에서 저를 도와 것은 최근 ResizeObserver 사양 polyfill입니다 :

    const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

    이 crossbrowser 및 성능이 좋은 (NO 폴링)의합니다.

  12. 12.나는 이것을 달성하기 위해 간단한 setInterval을 기능을했다. 클래스 div1와 요소가 표시되는 경우가 볼 수 있도록 DIV2 설정합니다. 나는 좋은 방법,하지만 간단한 수정을하지 알고있다.

    나는 이것을 달성하기 위해 간단한 setInterval을 기능을했다. 클래스 div1와 요소가 표시되는 경우가 볼 수 있도록 DIV2 설정합니다. 나는 좋은 방법,하지만 간단한 수정을하지 알고있다.

    setInterval(function(){
  if($('.div1').is(':visible')){
    $('.div2').show();
  }
  else {
    $('.div2').hide();
  }      
}, 100);

  13. 13.https://stackoverflow.com/a/3535028/741782 병렬 스레드에서 언급 한 바와 같이 당신은 또한 JQuery와 플러그인 표시 시도 할 수 있습니다

    https://stackoverflow.com/a/3535028/741782 병렬 스레드에서 언급 한 바와 같이 당신은 또한 JQuery와 플러그인 표시 시도 할 수 있습니다

  14. 14.애니메이션 후이 지원의 완화 및 트리거 이벤트 완료! [2.2.4 jQuery를 테스트]

    애니메이션 후이 지원의 완화 및 트리거 이벤트 완료! [2.2.4 jQuery를 테스트]

    (function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

    http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/에 의해 영감을

  15. 15.그냥 선택과 트리거를 바인딩하고 트리거 이벤트에 코드를 넣어 :

    그냥 선택과 트리거를 바인딩하고 트리거 이벤트에 코드를 넣어 :

    jQuery(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

  16. 16.DOM 속성에 변화를 감상 할 수 플러그인 JQuery와가있다,

    DOM 속성에 변화를 감상 할 수 플러그인 JQuery와가있다,

    https://github.com/darcyclarke/jQuery-Watch-Plugin

    플러그인은 당신이 할 필요가 모든 바인드 MutationObserver입니다 랩

    그런 다음 사용 사업부를 시청하는 데 사용할 수 있습니다 :

    $("#selector").watch('css', function() {
    console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
    //or any random events
});

  17. 17.이 간단한 방법으로 일을 할 것입니다 희망 :

    이 간단한 방법으로 일을 할 것입니다 희망 :

    $("#myID").on('show').trigger('displayShow');

$('#myID').off('displayShow').on('displayShow', function(e) {
    console.log('This event will be triggered when myID will be visible');
});

  18. 18.나는 Glenns의 아이디어를 기반으로 Catalint에서 숨기기 / 표시 이벤트 트리거를 변경했습니다. 내 문제는 내가 모듈 응용 프로그램을 가지고 있었다. 나는 보여주는 모듈과 숨어있는 div의 부모 사이에서 변경. 내가 모듈을 숨기고 다른 하나를 보여 때 모듈 사이를 전환 할 때 그런 그의 방법 나는 눈에 보이는 지연을 가지고있다. 나는 단지이 이벤트를 liten, 일부 특수 차일에서 때로는 필요가있다. I 클래스 "displayObserver"만 차일을 통지하기로 결정 그래서

    나는 Glenns의 아이디어를 기반으로 Catalint에서 숨기기 / 표시 이벤트 트리거를 변경했습니다. 내 문제는 내가 모듈 응용 프로그램을 가지고 있었다. 나는 보여주는 모듈과 숨어있는 div의 부모 사이에서 변경. 내가 모듈을 숨기고 다른 하나를 보여 때 모듈 사이를 전환 할 때 그런 그의 방법 나는 눈에 보이는 지연을 가지고있다. 나는 단지이 이벤트를 liten, 일부 특수 차일에서 때로는 필요가있다. I 클래스 "displayObserver"만 차일을 통지하기로 결정 그래서

    $.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

    아이가 "쇼"또는 "숨기기"이벤트를 수신하고 싶은 그런 때 나는 그에게 클래스 "displayObserver"를 추가해야하고, 그것을 듣고 계속하고 싶지 않을 때, 나는 그에게 클래스를 제거

    bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

    I 소원 도움말

  19. 19.한 가지 방법은이 작업을 수행합니다. 단지 CSS 클래스 변경에 의해 만들어진,하지만 속성도 변화를 감시하기 위해 확장 할 수 있습니다 가시성이 변경에 작동합니다.

    한 가지 방법은이 작업을 수행합니다. 단지 CSS 클래스 변경에 의해 만들어진,하지만 속성도 변화를 감시하기 위해 확장 할 수 있습니다 가시성이 변경에 작동합니다.

    var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

  20. 20.내 솔루션 :

    내 솔루션 :

    ; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

    사용 예 :

    if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

  21. 21.

    $( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

  22. 22.

    <div id="welcometo">Özhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

    이 코드 자동 제어하지 쿼리 보이거나 unvisible 제어를 필요

    23. from https://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] window.onbeforeunload 및 window.onunload 파이어 폭스, 사파리, 오페라에서 작동하지 않는 이유는 무엇입니까?  (0) 2020.10.03
[JQUERY] 발 ()와 텍스트 사이의 차이 ()  (0) 2020.10.03
[JQUERY] jQuery를 클릭 이벤트 발사 여러 번  (0) 2020.10.03
[JQUERY] 그것의 jQuery CSTE 연구진 및 호버를 사용할 수 있습니까?  (0) 2020.10.03
[JQUERY] 어떻게 jQuery를 사용하여 사업부의 innerHTML을 교체하는?  (0) 2020.10.03
,

티스토리툴바