javascript - एक div दिखाई देने पर कार्रवाई ट्रिगर करने के लिए jQuery घटना




(14)

JQuery वेपॉइंट्स का प्रयोग करें:

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

JQuery Waypoints की साइट पर अन्य उदाहरण।

मैं अपनी साइट में jQuery का उपयोग कर रहा हूं और जब कुछ निश्चित div दिखाई देता है तो मैं कुछ क्रियाओं को ट्रिगर करना चाहता हूं।

क्या किसी प्रकार का "आविष्कारशील" ईवेंट हैंडलर मनमाने ढंग से divs को संलग्न करना संभव है और जब कोई div दिखाई देता है तो कुछ कोड चलाते हैं?

मुझे कुछ छद्म कोड की तरह कुछ चाहिए:

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

चेतावनी ("कुछ करें") कोड तब तक नहीं आग लगाना चाहिए जब तक सामग्री वास्तव में दिखाई नहीं दे रही है।

धन्यवाद।


आप jQuery की लाइवक्व्यू प्लगइन का उपयोग कर सकते हैं। और कोड को निम्नानुसार लिखें:

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

फिर हर बार ContentDiv दिखाई देता है, "कुछ करें" चेतावनी दी जाएगी!


आप हमेशा मूल .show() विधि में जोड़ सकते हैं, इसलिए जब भी आप कुछ दिखाते हैं या आपको विरासत कोड के साथ काम करने की आवश्यकता होती है तो आपको ईवेंट ट्रिगर करने की आवश्यकता नहीं होती है:

Jquery एक्सटेंशन:

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 () विधि के सामान्य व्यवहार को निष्पादित करते समय शो और बाद दिखाए जाने से पहले कुछ करने देता है।

आप एक और तरीका भी बना सकते हैं ताकि आपको मूल .show () विधि को ओवरराइड करने की आवश्यकता न हो।


इसके लिए कोई मूल घटना नहीं है जिसके लिए आप इसमें शामिल हो सकते हैं, लेकिन जब आप div का उपयोग करके दृश्यमान बनाते हैं तो आप अपनी स्क्रिप्ट से एक ईवेंट ट्रिगर कर सकते हैं। 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');
});

एनीमेशन के बाद यह समर्थन आसान और ट्रिगर घटना! [jQuery 2.2.4 पर परीक्षण]

(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/ द्वारा प्रेरित


ऐसा करने का एक तरीका।
सीएसएस वर्ग परिवर्तन द्वारा किए गए दृश्यता परिवर्तनों पर ही काम करता है, लेकिन विशेषता परिवर्तनों को देखने के लिए भी बढ़ाया जा सकता है।

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); }

डीओएम विशेषताओं में परिवर्तन देखने के लिए एक jQuery प्लगइन उपलब्ध है,

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

प्लगइन लपेटें आपको बस इतना करना है कि आप MutationObserver को बांधें

इसके बाद आप इसका उपयोग करके div को देखने के लिए उपयोग कर सकते हैं:

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

निम्नलिखित कोड ( http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ ) से खींचा गया है, आपको $('#someDiv').on('show', someFunc); का उपयोग करने में सक्षम करेगा $('#someDiv').on('show', someFunc);

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

मुझे यहां क्या मदद मिली हाल ही में ResizeObserver spec polyfill :

const divEl = $('#section60');

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

ध्यान दें कि यह क्रॉसब्रोसर और कलाकार (कोई मतदान नहीं) है।


मैंने इसे प्राप्त करने के लिए एक सरल setinterval समारोह किया था। यदि कक्षा div1 के साथ तत्व दिखाई देता है, तो यह div2 को दृश्यमान सेट करता है। मैं एक अच्छी विधि नहीं जानता, लेकिन एक साधारण फिक्स।

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

यदि आप सभी तत्वों (और बाल तत्व) पर ईवेंट को ट्रिगर करना चाहते हैं जो वास्तव में दिखाई दे रहे हैं, तो $ .show, टॉगल, टॉगल क्लास, एडक्लास, या निकालें क्लास:

$.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);
});

आप अतिरिक्त jQuery कार्यों को शीर्ष पर सरणी में जोड़कर ओवरराइड जोड़ सकते हैं (जैसे "attr")


समस्या को डीओएम उत्परिवर्तन पर्यवेक्षकों द्वारा संबोधित किया जा रहा है। वे आपको बदलते सामग्री, टेक्स्ट या डोम तत्वों के गुणों की घटनाओं के लिए एक पर्यवेक्षक (एक फ़ंक्शन) को बांधने की अनुमति देते हैं।

आईई 11 के रिलीज के साथ, सभी प्रमुख ब्राउज़र इस सुविधा का समर्थन करते हैं, http://caniuse.com/mutationobserver

उदाहरण कोड निम्नानुसार है:

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});
<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


मेरा समाधान:

; (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
}

$( 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");
    });
});




jquery