0

So I have this Jquery functions that I've created using delegations and call each functions in the documeny.ready.

$(document).ready(function () {
    getContent();
    getQuoteButtton();
    popupModal();
    plugins();
});

function getQuoteButtton() {
    // button quote
    $("body").on("click", ".btn-quote", function (e) {
        var $this = $(this);
        $this.toggleClass('quote-selected');
        if ($this.hasClass('quote-selected')) {
            $this.text('Selected');
        } else {
            $this.text('Select This Quote');
        }
    });
}


function getContent() {
    // fire on click
    $("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) {
        // setting target from data attributes
        var $this = $(this),
            target = $this.attr('data-target'),
            container = $('#get_content');
        container.load('pages/' + target + '.php');
    });
}
function popupModal() {

    /*Toggle popup-modal class */
    $("body").on("click", ".popup-modal-toggle", function (e) {
        $('.popup-modal').fadeIn().show();
    });

    //close popup button
    $("body").on("click", ".popup-close", function (e) {
        $('.popup-modal').fadeOut().hide(300);
    });
}

function plugins() {
    // phone number plugin initialized singapore and malaysia only
    $("#phone-num").intlTelInput({
        initialCountry: "SG",
        onlyCountries: ['SG', 'MY'],
        utilsScript: './resources/vendors/intl-tel-input-master/js/utils.js'
    });

    // Select tags with search bar
    $(".chzn-select").chosen();
}

The other functions is working fine but when I call the plugins function it doesn't seem to load after using the getContent.

The getContent function is where I handle my ajax call to load each pages in the section using the div element #get_content

I don't understand why my plugins function is not working. Does anybody know why? Do I have to call each functions in plugins to use delegations also? if so, what's the process? Thanks.

EDIT - Correct Answer

I have find out the solution, in the getContent function, I also added the plugins() function inside to fetch it after ajax. I don't know why this question was closed even though I have a different approach in coding.

function getContent() {
    // fire on click
    $("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) {
        // setting target from data attributes
        var $this = $(this),
            target = $this.attr('data-target'),
            container = $('#get_content');
        container.load('pages/' + target + '.php', function (response, status, xhr) {
            // include the plugins function after the content loads -> if no initialization function won't load
            plugins();
        });;
    });
}
laurence keith albano
  • 1,409
  • 4
  • 27
  • 59
  • `$(".chzn-select")` will *only* apply to elements that exist at the time the code runs. If you add elements after, this won't have been applied (as the code has already run). *event* delegation lets you get around this, but there's no "run some code delegation". Re-run your initialisation based on container: `container.find(".chzn-select").chosen()` inside the `.load` callback. – freedomn-m Nov 12 '21 at 07:25
  • You are delegating in ALL other functions but the plugin one. You ALSO need to delegate or re-call the plugin function if $("#phone-num") and/or $(".chzn-select") are dynamically inserted – mplungjan Nov 12 '21 at 07:25
  • @mplungjan that answer doesn't address things like `.chosen()` or `.intlTelInput` and OP is already using event delegation. – freedomn-m Nov 12 '21 at 07:26
  • 1
    @freedomn-m Let's find a better dupe then. Still a dupe – mplungjan Nov 12 '21 at 07:27
  • @mplungjan very likely – freedomn-m Nov 12 '21 at 07:30
  • [Better?](https://stackoverflow.com/questions/11786717/making-jquery-plugins-work-after-an-ajax-call) – mplungjan Nov 12 '21 at 07:31
  • [Loads of dupes](https://www.google.com/search?q=jquery+plugin+after+ajax+site:stackoverflow.com) – mplungjan Nov 12 '21 at 07:31
  • 1
    Also: https://stackoverflow.com/questions/13746889/chosen-not-working-on-elements-from-ajax-call – freedomn-m Nov 12 '21 at 07:32
  • Same search inside SO: https://stackoverflow.com/search?q=%5Bjquery%5D+plugin+after+ajax - none (that I bothered to look at) have a decent explanation - just "do this". Terrible code-only answers. – freedomn-m Nov 12 '21 at 07:34
  • I appreciate you guys helping me. do we have some sample code to work with ? I'm also trying to find better solutions. thanks – laurence keith albano Nov 12 '21 at 08:12
  • 1
    I assume `container.load('pages/' + target + '.php', plugins);` – mplungjan Nov 12 '21 at 08:39
  • @mplungjan I have updated my code with the correct process, you are right. Just call the plugins() function after getting the content. not sure why this question was closed due to similar question even though I have a different approach. – laurence keith albano Nov 12 '21 at 09:04
  • [The dupe I posted](https://stackoverflow.com/questions/13746889/chosen-not-working-on-elements-from-ajax-call) did suggest to just call .chosen after the ajax call – mplungjan Nov 12 '21 at 09:05
  • Why not just do `container.load('pages/' + target + '.php', plugins);` ? – mplungjan Nov 12 '21 at 09:37
  • 1
    Tested, it's working find even if there are many functions to insert after the plguins function. Thank you so much. – laurence keith albano Nov 12 '21 at 09:40

0 Answers0