javascript - Inline jQuery script not working within AJAX call

Question

Welcome To Ask or Share your Answers For Others

javascript - Inline jQuery script not working within AJAX call

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Inline jQuery script not working within AJAX call

I have a issue:
while i call a inline script (wich uses jQuery too) from another page with ajax - it seems, that jQuery is no more defined (?), and I cannot use any of jQuery functions, that should be applied (according to inline script) to content.

It's basically a news list, which holds links to particular news items. I prefer using inline-script at this time, because I won't need this functionality elsewhere.

$.ajax({
 url: href,
 cache: false,
 success: function(html){
  $('#fancy_ajax').append($(html).find('.mainContentPadded'));
}
});

As you can see, I'm simply calling a part of another page and appending its contents to page.

When I load full page (not the part of it) - jQuery works as expected (that's why I came across the idea, that it needs to be "rebinded").

Thank you!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:39:39+0000

So if I understand your question correctly you have some JavaScript contained within the html variable ? If so it will not work, because JavaScript that is retrieved from an AJAX hit is not executed by the browser due to security risks.

I recommend you include the necessary javascript code in your page that is initiating the the Ajax request so that it is already available when you append the new content.

*edit...

monksp added a great link as a comment that shows how to have jQuery do exactly what you want.

Here's also some code to do the same but manually:

<html>
<head>
<title>Test JavaScript JSON</title>
</head>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.2');
</script>
<body>
<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON('testjs.json', function(json){
               $(document.body).append(json.html);
               eval(json.js);
             });
    });

</script>
</body>
</html>

Here's the content of testjs.json:

{"html":"<p class="newelement">Click me</p>","js":"$(".newelement").click(function() { alert($(this).text()); });"}

And finally there are a bunch of existings plugins and other things to include javascript dynamically. I used YUI Get in the past: http://developer.yahoo.com/yui/3/get/

Categories

javascript - Inline jQuery script not working within AJAX call

javascript - Inline jQuery script not working within AJAX call

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags