मेरे पास एक वेबसाइट है जिसमें कई पोस्ट हैं और प्रत्येक पोस्ट में ऑटो टाइमआउट मोडल पॉपअप के साथ एक समान बटन है। नीचे स्क्रॉल करते समय, अधिक पोस्ट अनंत.जेएस से भरी हुई हैं। जो पदों को लोड करते हैं। समस्या : पहले पेज में टाइमआउट मोडल पॉपअप वाला लाइक बटन काम करता है। लेकिन जब पोस्ट असीमित रूप से लोड होते हैं तो मोडल पॉपअप अब काम नहीं कर रहा है।

<main role="main" class="container infinite-container">
<div class="row">
    <div class="col-sm-6 infinite-item">
        <article class="content-section">
            <div class="post-bar">
                <button href="" class="like2-btn btn-outline-dark">
                  <i class="fas fa-user"></i>
                </button>
                <!-- modal-->
                 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                     post liked
                                </div>
                            </div>
                        </div>
                <------>
                <p class="text">Tab the button for write a post</p>
            </div>
        </article>
    </div>
 </div>
{% if page_obj.has_next %}
        <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
    {% endif %}
    <div class="col-sm-6">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.min.js" type="text/javascript"></script>
    <script>
    var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],
        handler: function(direction) {

    },
    offset: 'bottom-in-view',
    onBeforePageLoad: function () {
    $('.spinner-border').show();
    },
    onAfterPageLoad: function () {
    $('.spinner-border').hide();
    }


    });
    $(document).ready(function(){
        $('.like2-btn').click(()=>{
            $('#exampleModal').modal('show');
            setTimeout(() => {
                $('#exampleModal').modal('hide');
            },1000);
        });
    });

    </script>

सबसे पहले यह नीचे स्क्रॉल करने के बाद 10 पोस्ट लोड करता है 10 पोस्ट फिर से लोड होता है जो अनंत द्वारा किया जाता है। जेएस मैं प्रत्येक अनंत कंटेनर में एक ही मोडल पॉपअप फ़ंक्शन जोड़ना चाहता हूं। लेकिन किसी तरह यह पहले पृष्ठ के बजाय अनंत कंटेनर में काम नहीं कर रहा है जो पहले ही लोड हो चुका है।

0
Cavin blake 13 मई 2021, 19:40

1 उत्तर

सबसे बढ़िया उत्तर

ईवेंट प्रतिनिधिमंडल पर एक नज़र डालें। मूल रूप से, आप श्रोता को तत्वों से नहीं, बल्कि पृष्ठ से जोड़ेंगे और अपने हैंडलर को घटना विवरण पर निर्भर करेंगे।

तो (वेनिला में) यह कुछ इस तरह होगा:

document.addEventListener('click', e => {
  if(e.target.classList.contains('like2-btn') || e.target.closest('.like2-btn')) {
    // do sth...
  }
})
0
marks 13 मई 2021, 19:46
हां और नहीं, नए मानकों के लिए आपको निष्क्रिय चयन पर वास्तव में अच्छा होना चाहिए और कुछ मामलों में आप इसे आगे बढ़ाने में सक्षम नहीं होंगे क्योंकि एक तत्व के लिए Event.stopPropagation() की आवश्यकता हो सकती है। इस आवश्यकता को पूरा करने के लिए अन्य तत्वों को हथियाने का सुझाव देंगे यदि यह आता है।
 – 
blanknamefornow
13 मई 2021, 19:50
तो क्या यह काम करेगा? मेरा मतलब उस उत्तर से है जो अंकों द्वारा प्रस्तुत किया जाता है
 – 
Cavin blake
13 मई 2021, 22:51
हाँ, जब तक आपको क्लिक पर होने वाली कुछ कार्रवाइयों को रोकने की आवश्यकता नहीं है। फॉर्म सबमिशन/आदि।
 – 
blanknamefornow
14 मई 2021, 00:24
ज़रूर। यदि आपके पास एक विशेष मामला है जहां आप बुलबुले से बचना चाहते हैं तो आपको श्रोता को नए नोड्स के लिए मैन्युअल रूप से पुन: प्रारंभ करने की आवश्यकता हो सकती है या हैंडलर को दस्तावेज़-तत्व के बजाय एक गहरे डोम नोड में संलग्न करना पड़ सकता है। लेकिन हाँ, यह आपके लिए काम करेगा Cavin
 – 
marks
14 मई 2021, 09:26
अच्छा धन्यवाद अंक और @blanknamefornow
 – 
Cavin blake
14 मई 2021, 12:20