javascript प्रत्येक() के बजाय jquery live() कैसे कार्यान्वित करें




popup tooltip (2)

हाय, मैं इस स्क्रिप्ट http://jsbin.com/ipajo5/ पर काम करने के लिए कोशिश कर रहा हूं, लेकिन .eec () के बजाय .ech () के प्रयोग से HTML तालिका मक्खी पर आबादी है।

$(document).ready(function() {

  $('.bi').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    var beingShown = false;
    var shown = false;

    var trigger = $('.tt', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;    
        popup.css({
          top: $(this).position().top-150,
          left: $(this).position().left-100,
          display: 'block' 
        })
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          shown = false;
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });

});​

ध्यान दें। कुछ थ्रेड्स में प्रदर्शन के लिए () के बजाय प्रतिनिधि () का उपयोग करने की अनुशंसा की जाती है, लेकिन कई दिनों के बाद मैं केवल यह पॉपअप / टूलटिप काम करने के लिए चाहता हूं

धन्यवाद।


आपको वास्तव में कुछ भी बदलने की आवश्यकता नहीं है मेरे पास एक समान कार्य है, लेकिन थोड़ा अधिक विस्तारित है। बस इसे दस्तावेज़ से हटा दें। ध्यान दें, आप लाइव () के बजाए प्रतिनिधि () का उपयोग करने में बेहतर हैं बुदबुदाहट के कारण यदि आप पूरी तरह से स्वचालित पृष्ठ चाहते हैं, जो मक्खी पर अपलोड किया गया है तो jaltiere.com पर एक नज़र डालें

लेकिन आपको अपनी स्क्रिप्ट को पूरी तरह से दोबारा लिखना होगा। इसके अलावा, दोनों लाइव () और प्रतिनिधि () को माउसओवर और माउसआउट इवेंट्स के साथ स्थापित करना मुश्किल है।

दस्तावेज़ में कोई कैशिंग नहीं है।

$(document).ready(function() {
            $.ajaxSetup({ cache: false });});

पेज लोड पर, अपना एजेक्स कॉल करें और अपनी स्क्रिप्ट को अलग फ़ंक्शन के रूप में कॉल करें:

$(function() {
$.get("ajaxpage.php", function(data) {
    $("#recent").html(data);
    bifunct();
});});

एक अद्यतन के लिए अलग समारोह:

function ajaxcall(){
$.get("ajaxpage.php?", function(data) {
    $("#recent").html(data);
    bifunct();
});};

और अब आपकी स्क्रिप्ट मैंने आपके माउसवॉयर और माउसउट को माउससेन्ट और माउसलेव में बदल दिया है I वे थोड़ा बेहतर काम करते हैं

bifunct = function(){
$('.bi').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;
    var hideDelayTimer = null;
    var beingShown = false;
    var shown = false;
    var trigger = $('.tt', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseenter(function () {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        if (beingShown || shown) {
            return;
        } else {
            beingShown = true;    
            popup.css({
                top: $(this).position().top-150,
                left: $(this).position().left-100,
                display: 'block' 
            })
            .animate({
                top: '-=' + distance + 'px',
                opacity: 1
            }, time, 'swing', function() {
                beingShown = false;
                shown = true;
            });
        }
    }).mouseleave(function () {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        hideDelayTimer = setTimeout(function () {
            hideDelayTimer = null;
            popup.animate({
                top: '-=' + distance + 'px',
                opacity: 0
            }, time, 'swing', function () {
                shown = false;
                popup.css('display', 'none');
            });
        }, hideDelay);
    });
});}

यदि आप अपडेट करना चाहते हैं, तो इसे अपने शरीर में डाल दें या एजाक्स-कॉल करने के लिए इसे बदल दें:

<a onclick="ajaxcall();return false" href="#"> update </a>

".each ()" को ".live ()" के साथ बदलकर बहुत कम समझ में आता है ".each" सुविधा को DOM के कुछ हिस्सों को पुनरावृत्त करने के लिए प्रदान किया गया है जो किसी चयनकर्ता द्वारा मिलान किया गया है, या अन्यथा jQuery के ऑब्जेक्ट के घटकों के माध्यम से कार्यान्वित करने के लिए।

सभी "। (()" कर सकते हैं ईवेंट हैंडलिंग के साथ मदद कर सकता है। यदि आपको अपने पृष्ठ के कुछ हिस्सों को गतिशील रूप से लोड किए जाने के रूप में अन्य चीजों को करने की आवश्यकता है, तो आपको गतिशील अद्यतनों के लिए "सफलता" हैंडलर्स में, या किसी अन्य समान चीज़ को अपने आप में एक साथ रखना होगा।





tooltip