after ajax call - $(document).ready();?

Question

I've got a problem. this is what I have on my page somewhere in header

 $(document).ready(function(){
       $(".ajax").click(function(e){
       var url = $(this).attr("href");
       var url = url.split("##/");

       if (!url[1]){url[1]=" ";}
       var page = "http://<?php echo $_SERVER[SERVER_NAME]; ?>page.php?ajax=1&what="+url[0]+url[1];
       $("#content").load(page);

       var kkk = 'Asdasdasd';
       });
 });

so, after clicking on <a href="##/new_page" class="ajax">new</a>, content is being filled with this:

<script> alert(kkk); </script>
<a href="##/old_page" class="ajax">old page</a>

However, alert is not taking in consideration as new page DOES NOT see kkk and neither link which worked on the original page works. Why?

@Ghyath Serhal: I've got page, there is a link which looks like this ##/statistics I click it, and script (first script) in my quesstion is being proccessed (content is being loaded with content of page.php?ajax=1&what=statistics ... now, in statistics, there is a link ##/profile <-- but this link does not work! Because first script does not affect new added code... got it ? — genesis, Jun 07 '11 at 05:33

score 2 · Answer 1 · answered Jun 07 '11 at 05:18

2

The kkk variable is being enclosed in the scope of the document ready function. Move it outside of this function instead:

var kkk = '...';

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

answered Jun 07 '11 at 05:18

David Tang

92,262
30
167
149

wow thaks! However, this does not help me in case of click, which is my problem (I added kkk if next page (after aja call)) see it. – genesis Jun 07 '11 at 05:30
1

@genesis, all you have to do is *declare* `kkk` outside of the function with `var kkk;`. You can still *assign* its value after clicking, with `kkk = '...'` (without the `var`). – David Tang Jun 07 '11 at 05:32
ok, I think I did say it wrong. I have a link with same "style" on that ajax called page, but that link does not work, it does nothing, just changes adress... – genesis Jun 07 '11 at 05:34
Genesis, if you only want kkk to be defined after the page load, you still have to declare the variable in the global scope. Declare it with 'var kkk;' and then inside your function use 'kkk="asdasdasd"'. Then if you want to query your function, you simply have to add in a test to check if it is defined or not before you use it. – jsonnull Jun 07 '11 at 05:34
@genesis, in that case, you need to change `.click(function () {...})` to `.live('click', function () {...})`, as suggested by @mootinator too. – David Tang Jun 07 '11 at 05:36

Kevin Stricker · Accepted Answer · 2011-06-07T16:07:46.023

In order for the link to work after loading it again, you probably want a live event. That will watch for any new objects with the ajax class as well instead of just the ones which exist at the time the original document is loaded. And if you need to set anything else up, which would normally be inside document ready, put that in an anonymous function as the second parameter to load() because it isn't guaranteed to have loaded the new content yet otherwise. eg:

   $(".ajax").live('click', function(e){
   var url = $(this).attr("href");
   var url = url.split("##/");

   if (!url[1]){url[1]=" ";}
   var page = "http://<?php echo $_SERVER[SERVER_NAME]; ?>page.php?ajax=1&what="+url[0]+url[1];
   $("#content").load(page, function () { var kkk = 'Asdasdasd'; });

   });

Or as @Levi points out, a .delegate call would accomplish the same thing while being a bit less wasteful: $('content').delegate('.ajax', 'click', function() (...)

For the love of all that is good and sane, can we ***please*** stop using `live`? It was a mistake, use `delegate`. A decent summary of why: http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate — Levi Morrison, Jun 07 '11 at 06:24

after ajax call - $(document).ready();?

2 Answers2