JQuery .on("click") event not triggering

Question

I am currently working on a "split-screen" web application. It uses selenium to retrieve the html of a webpage then sends and displays it in iframes using srcdoc. I want, when someone presses a link in the first screen, for the second screen to display a simple "Loading" while an ajax request is sent to the backend to retrieve the html of the url (as it might take a couple of seconds to load) then display the retrieved html in the second screen.

To do so, I "inject" a JQuery event code into the src code of the first screen in the backend (shown below) right before the end body tag (as the retrieved source is a string, that is easy to do). The second screen has id="oframe".

For some reason, the JQuery event wont trigger. Any ideas why?

<script>
    $("a").on("click",function(e){ 
    e.preventDefault(); 
    if(e.target.href){ 
        let link = e.target.href;
        parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
                                                       <p>Loading</p></body></html>";
        $.ajax({ 
            url: "/newOrigin",
            data: {"link":link}, 
            type: "POST", 
            success: function(response) { 
                 parent.document.getElementById("oframe").srcdoc=response.site;}, 
            error: function(error) {console.log(error);} 
        });
    }});
    </script>

Note that the event works if I only have

parent.document.getElementById("oframe").srcdoc="<html><head></head><body>

or

$.ajax({ 
            url: "/newOrigin",
            data: {"link":link}, 
            type: "POST", 
            success: function(response) { 
                 parent.document.getElementById("oframe").srcdoc=response.site;}, 
            error: function(error) {console.log(error);} 
        });

inside the if statement.Together they stop the event, I know that because preventDefault() is not working (link opens in a new tab).

Example <a> tag:

<a class="gdpr-modal-link" target="_blank" ref="http://www.politifact.com/privacy/">cookies</a>

Possible duplicate of html - How to prevent the browser from opening the link specified in href? — VLAZ
– VLAZ, Commented May 30, 2019 at 14:25
@VLAZ Did you even read the question? I know how to stop links. — Mohamed Moustafa
– Mohamed Moustafa, Commented May 30, 2019 at 14:26
@MohamedMoustafa html might help.. even if you don't think so... — Rachel Gallen
– Rachel Gallen, Commented May 30, 2019 at 14:35
Could it be that you are breaking a string value onto two lines? parent.document.getElementById("oframe").srcdoc="<html><head></head><body> <p>Loading</p></body></html>"; - try putting it all on one line. — MER
– MER, Commented May 30, 2019 at 14:46

MER · Accepted Answer · 2019-05-30 15:38:15Z

1

You cannot have a line break in the middle of JavaScript string.

So, put this:

parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
                                               <p>Loading</p></body></html>";

all on one line:

parent.document.getElementById("oframe").srcdoc="<html><head></head><body>p>Loading</p></body></html>";

answered May 30, 2019 at 15:38

MER

3282 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

JQuery .on("click") event not triggering

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related