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?](https://stackoverflow.com/questions/10219073/html-how-to-prevent-the-browser-from-opening-the-link-specified-in-href) — VLAZ, May 30 '19 at 14:25
@VLAZ Did you even read the question? I know how to stop links. — Mohamed Moustafa, May 30 '19 at 14:26
Do you inject the links before or after you run your `$("a").on("click" ...`. Most likely you run the script on startup (as it's directly in a ` — freedomn-m, May 30 '19 at 14:26
@freedomn-m https://stackoverflow.com/questions/30473581/when-to-use-preventdefault-vs-return-false — VLAZ, May 30 '19 at 14:27
@VLAZ The EVENT doesnt run. e.preventDefault() stops the link, but it is not doing it's job because the event is not triggering. — Mohamed Moustafa, May 30 '19 at 14:28
@MohamedMoustafa OK, then sorry. I misread your question. Are you sure the JS you inject has been executed? Because from what you say it doesn't sound like it is. Or it's executed and it fails - is it possible to check for errors? — VLAZ, May 30 '19 at 14:29
@freedomn-m didn't you ask me what `preventDefault` did? The comment seems to be gone now, but I do remember seeing one and I think it was from you. — VLAZ, May 30 '19 at 14:30
@freedomn-m I get the entire html (including the links) THEN add the script right before the closing body tag of the retrieved url. This works perfectly fine if I only have the AJAX or only the parent.document.getEle....... So I dont think the issue is with document on ready — Mohamed Moustafa, May 30 '19 at 14:31
@freedomn-m it's a normal , I get it from normal websites like google and wikipedia. Read the latter part of my question (after the code) — Mohamed Moustafa, May 30 '19 at 14:33
To be honest, the last paragraph is very hard to read - maybe add some ``` tags? — freedomn-m, May 30 '19 at 14:34
@MohamedMoustafa html might help.. even if you don't think so... — Rachel Gallen, May 30 '19 at 14:35
"Together they stop the link" "I know because it's not working (opens link)" (ie doesn't stop the link) — freedomn-m, May 30 '19 at 14:35
@MohamedMoustafa please post the html portion containing the — GrafiCode, May 30 '19 at 14:35
"the JQuery event wont trigger." "Note that the event works" - it's too contradictory. No doubt makes sense to you, but it's unclear at this end. — freedomn-m, May 30 '19 at 14:36
add a `try..catch` around the whole event handler - might pick up something https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch — freedomn-m, May 30 '19 at 14:37
@freedomn-m which is why I advice reading the whole sentence to understand better :^). I edited the question to make it clearer. — Mohamed Moustafa, May 30 '19 at 14:42
@RachelGallen this web app is a small part of the project I am working on, as long as it works it's fine. Unless you think that this is what is making it not work (unlikely as it worked before)? — Mohamed Moustafa, May 30 '19 at 14:43
@MohamedMoustafa I created a fiddle reproducing your code (guessing the minimal HTML), `click` works: https://jsfiddle.net/3ax5Lge2/ — GrafiCode, May 30 '19 at 14:43
Ah "stop the event" = "break the event" or "stop the event from working" - not *stop* it as in "return". Didn't catch on that one, sorry. — freedomn-m, May 30 '19 at 14:43
Could it be that you are breaking a string value onto two lines? parent.document.getElementById("oframe").srcdoc="
Loading
"; - try putting it all on one line. — MER, May 30 '19 at 14:46
Well, you have it: `let link = e.target.href;` but you did not specify ANY HREF in your tag (UNLESS IT IS A TYPO): `cookies` — GrafiCode, May 30 '19 at 14:47
@MER FOR THE WIN. fiddle with wrong code: https://jsfiddle.net/bhms9vnk/ fiddle with right code: https://jsfiddle.net/bhms9vnk/1/ — GrafiCode, May 30 '19 at 14:51
@GrafiCodeStudio Again I repeat, this is not my html. This is the html that will be retrieved from some url specified by the user. If you read my code properly, you wouldve noticed that the entire thing is in an if statement. If there was no href, the preventDefault will work and then nothing should happen; however, that is not the case. — Mohamed Moustafa, May 30 '19 at 14:53
@MER if you could put that in form of an answer, maybe we can close this godforsaken question — GrafiCode, May 30 '19 at 14:53
@MohamedMoustafa check MER's comment and my fiddles, you have a broken string which takes two lines — GrafiCode, May 30 '19 at 14:54
@MohamedMoustafa do you get any errors in the browser console? Something like `Uncaught SyntaxError: Invalid or unexpected token` ? — freedomn-m, May 30 '19 at 14:57
@GrafiCodeStudio I broke it when writing the question to make it readable. If the solution was that basic I wouldnt have spent the time needed to write this question. — Mohamed Moustafa, May 30 '19 at 15:17
Ok, so the next step is to provide a *reproducible* snippet (or jsfiddle to use fiddle's ajax helpers) so that we can see it working (as in see it failing) as there's no obvious reason (if it *was* obvious, I'm sure you would have spotted it long before now). If you've not seen it, this might help [mcve]. — freedomn-m, May 30 '19 at 15:24
Also, I think you'd be surprised just how many questions there are on here where an OP has spent a *long* time creating a really nice question and someone's just gone "there's a new line in your text" and that was the fault (or similar, eg missing space or missing "." for class selector). So it's always a possibility :) — freedomn-m, May 30 '19 at 15:26
@freedomn-m I might setup a github repo with the files (there is a flask python file, folders with scrapped websites, as well as the html files for the web app itself). I will comment it when I do. Thanks anyways :D — Mohamed Moustafa, May 30 '19 at 15:30
@freedomn-m It's a big project, and this snippet(above) interacts with the backend which in turn needs the scrapped websites in the folders. — Mohamed Moustafa, May 30 '19 at 15:38

score 1 · Answer 1 · answered May 30 '19 at 15:38

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>";

JQuery .on("click") event not triggering

1 Answers1