Jalankan fungsi JS apabila dokumen dimuatkan dan apabila elemen diklik

Question

Saya cuba menulis skrip Tampermonkey untuk melanjutkan aplikasi web perniagaan yang saya gunakan. Dalam erti kata yang sangat asas, beberapa URL muncul pada halaman dan saya perlu mengeluarkan nombor daripada URL dan kemudian menggunakan nombor itu untuk membina pautan baharu dan menambahkannya pada elemen induk.

Saya mempunyai ini setakat ini tetapi ia tidak berfungsi apabila saya mengklik pada elemen (penomboran hanyalah UL) atau apabila dokumen dimuatkan. Saya tahu fungsi itu berfungsi seolah-olah saya menetapkannya untuk dijalankan apabila saya mengklik di mana-mana dalam dokumen ia berfungsi. Apabila JS melaporkan bahawa halaman telah dimuatkan, ia hampir seperti halaman itu belum dimuatkan sepenuhnya.

(function() {
    'use strict';

    //get the pagination element
    var element = document.getElementsByClassName('pagination-sm');
    element.onclick = createLinks;
    document.onload = createLinks;

    function createLinks() {
    var links = document.querySelectorAll ("a[href*='/Field/POPendingCreate/']");

        for (var J = links.length-1; J >= 0; --J) {
            var thisLink = links[J];
            console.log(thisLink.href);
            var ppon = thisLink.href.match(/\d+/)[0];
            console.log(ppon);

            var a = document.createElement('a');
            var linkText = document.createTextNode("Preview Order");
            a.appendChild(linkText);
            a.title = "Preview Order";
            a.href = "https://website.com/Field/DownloadPendingPO?POPPKeyID=" + ppon + "&co=1&po=" + ppon;
            a.target = "_blank";

            var parentNode = thisLink.parentNode;
            console.log(parentNode);
            parentNode.appendChild(a);

        }
    }

 })();

Unsur

UL kelihatan seperti ini:

<ul uib-pagination="" items-per-page="formData.itemPerPage" class="pagination-sm ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope pagination ng-not-empty" data-total-items="pendingList.length" data-ng-model="formData.currentPage" data-max-size="10" data-ng-if="!attachmentView &amp;&amp; filteredDocuments.length > 0" role="menu"><!-- ngIf: ::boundaryLinks -->
<!-- ngIf: ::directionLinks --><li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev ng-scope disabled"><a href="" ng-click="selectPage(page - 1, $event)" ng-disabled="noPrevious()||ngDisabled" uib-tabindex-toggle="" class="ng-binding" disabled="disabled" tabindex="-1">Previous</a></li><!-- end ngIf: ::directionLinks -->
<!-- ngRepeat: page in pages track by $index --><li role="menuitem" ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&amp;&amp;!page.active}" class="pagination-page ng-scope active"><a href="" ng-click="selectPage(page.number, $event)" ng-disabled="ngDisabled&amp;&amp;!page.active" uib-tabindex-toggle="" class="ng-binding">1</a></li><!-- end ngRepeat: page in pages track by $index -->
<!-- ngIf: ::directionLinks --><li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next ng-scope disabled"><a href="" ng-click="selectPage(page + 1, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle="" class="ng-binding" disabled="disabled" tabindex="-1">Next</a></li><!-- end ngIf: ::directionLinks -->
<!-- ngIf: ::boundaryLinks -->
</ul>

Seperti yang saya katakan di atas, apabila saya menetapkannya untuk dijalankan apabila saya mengklik mana-mana pada dokumen, fungsi itu berfungsi seperti yang diharapkan. Apa yang lebih mengelirukan saya ialah ia tidak berfungsi apabila menggunakan document.onload. Ia seperti halaman hanya mula memuatkan data selepas saya mula berinteraksi dengannya. Sebab saya cuba menjalankan fungsi apabila penomboran diklik adalah kerana halaman itu seolah-olah mendapat semua data dan menyimpannya di suatu tempat (yang saya tidak dapat lihat), dan kemudian apabila penomboran diklik ia hanya menjentik halaman. Jadi saya perlu menjalankan fungsi pada pautan yang dijana pada halaman baharu setelah penomboran diklik.

Nampaknya saya perlu melambatkan berjalan document.onload atau cara lain untuk memahami selepas data dokumen dimuatkan dan mengetahui mengapa ia tidak berjalan apabila elemen penomboran UL diklik?

Answer 1

Daripada menunggu halaman dipaparkan dan kemudian menggelung semua elemen untuk menambahkan tag anchor. Hanya gunakan MutationObserver untuk mengendalikan sebarang elemen yang diberikan selepas menjalankan logik anda.

JS

(function() {
    'use strict';

    const createLinks = function ( nodeElement ){
        const queryElem = nodeElement.parentElement || nodeElement;
        const links = queryElem.querySelectorAll("a[href*='/Field/POPendingCreate/']");

        for ( const link of links || [] ){
            // Skip link if Preview has been attached
            if ( link.createLinkReady ) continue;

            // Get numbers from link href
            const [ ppon ] = link.href.match(/\d+/);

            // Create an anchor tag
            const a = document.createElement('a');
            a.innerHTML = 'Preview Order';
            a.setAttribute( 'title', 'Preview Order' );
            a.setAttribute( 'href', `https://website.com/Field/DownloadPendingPO?POPPKeyID=${ppon}&co=1&po=${ppon}` );
            a.setAttribute( 'target', '_blank' );
            a.setAttribute( 'rel', 'nofollow' );

            // Append anchor tag to parent element
            link.parentElement.appendChild( a );
            link.createLinkReady = true;
        }

    }

    // Create DOM MutationObserver
    const Observer = new MutationObserver( function( mutationsList ) {
        // Loop through mutations
        for ( const mutation of mutationsList || [] ) {
            // Loop through added nodes
            for ( const node of mutation.addedNodes || [] ){
                // Run createLinks on node
                createLinks( node );
            }
        }
    });

    // Observe DOM for new elements starting from document.body
    Observer.observe( document.body, { childList:true, subtree:true } );

    // Process links that have been rendered
    createLinks( document.body );
 })();