jQuery script not working on html appended from another page

Question

I've already referred to these answers but that doesn't solve:

jQuery on button click not working after append

Jquery click event not working after append method

I want to load the html for click button on page load like this:(this shows the html with css correctly, but the script is not working)

$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
    }, "html" );

But if I load the html i n this way the script works:

$('body').append('<div id="ckit" class="layout-compact is-hiddenx"\
     data-ckit-compact style=""><a href="javascript:void(0);"\
      class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o">\
      </i></a></div><div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>\
      <iframe src="/plugins/system/conver/conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" \
      name="ckit-full-view" scrolling="no" frameborder="0"allowtransparency="true" \
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; \
      margin: 0px; float: none; background: none;"></iframe></div>');

SCRIPT:

var toggleCkitOn = $('[data-ckit-toggle-on]');
 toggleCkitOn.on('click', function(e) {
            $(ckitFull).removeClass("is-hidden");
            $(ckitCompact).addClass("is-hidden");
            $('body').addClass("disable-scrolling");
            $("html").css({"height": "100%", "overflow": "hidden"});
            $("body").css({"position": "relative"});
            e.preventDefault();
        });

HTML

<div id="ckit" class="layout-compact is-hiddenx" data-ckit-compact style="">
    <a href="javascript:void(0);" class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o"></i></a>
</div>

<div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>
    <iframe src="conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" name="ckit-full-view" scrolling="no" frameborder="0" allowtransparency="true" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; margin: 0px; float: none; background: none;"></iframe>
</div>

I tried to avoid the delegation but doesn't help,

$('body').on('click',toggleCkitOn, function(e) {...});

Tried with other promises to check if ajax functions correctly, and I get all the below get executed without error:

1) success 2) second success 3) finished

 var jqxhr = $.get( "/plugins/system/conversekit/conversekit/test.php", function() {
          alert( "success" );
        })
          .done(function() {
            alert( "second success" );
          })
          .fail(function() {
            alert( "error" );
          })
          .always(function() {
            alert( "finished" );
          });

Working answer (but i want the variables to be global scope, declaring them outside this function makes the click the doesn't work):

$("body").on("click", ".btn-toggle-ckit", function(e) { 
            var toggleCkitOn = $('[data-ckit-toggle-on]');
            var ckitFull = $('[data-ckit-full]');
            var ckitCompact = $('[data-ckit-compact]');
            var ckitIframe = $('[data-ckit-iframe]');
             $(ckitFull).removeClass("is-hidden");
             $(ckitCompact).addClass("is-hidden");
             $('body').addClass("disable-scrolling");
             $("html").css({"height": "100%", "overflow": "hidden"});
             $("body").css({"position": "relative"});
             e.preventDefault();
        } );

are you sure the AJAX process into PHP files was loaded successfully? I think, your problem is in there.. — Fadhly Permata
– Fadhly Permata, Commented Jul 4, 2016 at 2:48
The script is an external folder, the path is correctly specified and its imported as its found in source code — 112233
– 112233, Commented Jul 4, 2016 at 2:50

Fadhly Permata · Accepted Answer · 2016-07-04 03:22:31Z

0

function ckitDelegate() {
var toggleCkitOn = $('[data-ckit-toggle-on]');
 toggleCkitOn.on('click', function(e) {
            $(ckitFull).removeClass("is-hidden");
            $(ckitCompact).addClass("is-hidden");
            $('body').addClass("disable-scrolling");
            $("html").css({"height": "100%", "overflow": "hidden"});
            $("body").css({"position": "relative"});
            e.preventDefault();
        });
};

$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
       ckitDelegate();
}, "html").fail(function() {
alert( "error" );
});

This my last opinion, i will give-up if it not working too:

$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
  $('body').append(data);
  setTimeout(function(){ ckitDelegate(); }, 500);
}, "html");

edited Jul 4, 2016 at 3:22

answered Jul 4, 2016 at 2:58

Fadhly Permata

1,68613 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Fadhly Permata Over a year ago

I am not sure what the $("html").css({"height": "100%", "overflow": "hidden"}); purposes... So, I am still put in there too..

112233 Over a year ago

Tried your way, still the script doesn't work...btw the $('html').css... is to expand the div to the full height

112233 Over a year ago

the ckitDelegate() is not get called

Fadhly Permata Over a year ago

if so, the get method not loaded properlly.. have you try the other promise except success? as referred from here https://api.jquery.com/jquery.get/

112233 Over a year ago

Please check my post, as I tried with other promises and it seems like my get request works

|

Cijo V J · Accepted Answer · 2016-07-04 03:50:28Z

0

please try this. Add click event in one function and call that function on DOM load and after the append operation. Like this:

  function Init(){
 toggleCkitOn.on('click', function(e) {});
}

$(document).ready(function(){
Init();
});

$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
    Init();
    }, "html" );

Just make sure you have defined the Init() before calling them

answered Jul 4, 2016 at 3:50

Cijo V J

2711 gold badge3 silver badges14 bronze badges

Comments

Bilbo Baggins · Accepted Answer · 2016-07-04 04:21:35Z

0

Your issue was that the iframe was hiding $('[data-ckit-toggle-on]') and therefore preventing any click events - i.e. the click events weren't firing because you were clicking the iframe, not the a href.

If you remove the iframe (temporarily - solve one issue at a time), then try again, it should at least fire the click event.

Right click on your $('[data-ckit-toggle-on]') element in the DOM then click "Inspect element" to see if it is visible or not.

EDIT

Try this:

$.get("plugins/system/conversekit/conver/test.php",
    function(data) { $('body').append(data); },
        "html").then(function(data) {
        var toggleCkitOn = $('[data-ckit-toggle-on]');
        var ckitFull = $('[data-ckit-full]');
        var ckitCompact = $('[data-ckit-compact]');
        var ckitIframe = $('[data-ckit-iframe]');

        $("body").on("click", ".btn-toggle-ckit", function(e) { 
            alert("hi");
             $(ckitFull).removeClass("is-hidden");
             $(ckitCompact).addClass("is-hidden");
             $('body').addClass("disable-scrolling");
             $("html").css({"height": "100%", "overflow": "hidden"});
             $("body").css({"position": "relative"});
             e.preventDefault();
        });
    });

If you're still having trouble clicking the a href, try adding a css margin-top to the iframe to where it isn't covering the a href. Let me know.

edited Jul 4, 2016 at 4:21

answered Jul 4, 2016 at 4:03

Bilbo Baggins

1,3391 gold badge11 silver badges23 bronze badges

6 Comments

112233 Over a year ago

@Biblo, yes the element shows up when inspect with and without the iframe.. Also after removing the iframe, script doesn't work fro simple alert('hi); on click event..But with my new solution it works, so I would like to know the way to deal with the variable scope as I mentioned..please see if you could help..thanks

Bilbo Baggins Over a year ago

The element might be showing up but still be hidden by the iframe. I'll look into it.

Bilbo Baggins Over a year ago

Edited post - give it a shot and let me know if it's what you're looking for.

Bilbo Baggins Over a year ago

Sorry for the multiple comments. Regarding your scope issue, you won't be able to access your ckit elements globally until after the $.get is finished. Your best bet is to use a .then (like my solution above) and access them in subsequently called functions.

112233 Over a year ago

unortunately I can't do it your way because, my get call need to be seperated from the events handling script for some purposes, meaning in two different files

|

A.K. · Accepted Answer · 2016-07-04 04:27:35Z

0

If your html create dynamic that time you should bind click method.

Write this code after appending your html.

Example :-

$('#buttonOuter').append('<input type="button" id="myid"/>');

$("#myid").unbind();
if($("#myid").length > 0 && $._data( $("#myid")[0], "events" )==undefined){
    $('#myid').bind('click',function(){
        // write your code
    });
}

I think it's working for you

answered Jul 4, 2016 at 4:27

A.K.

2,3523 gold badges30 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery script not working on html appended from another page

4 Answers 4

7 Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related