JQuery is triggered twice in dynamic page

My problem: I have a page, index.php, that dynamically loads some html contents, from admin_agent_area.php, into some divs (#adminarea) in index.php. This happens when clicking the link "#adduser" and a jquery function is handling the loading and inserting. Now, in admin_agent_area.php. I have some other divs (#usertable) that is loaded with a table when the admin_agent_area.php has been loaded.

id=#adduser is a link (< a >) in index.php, outside "adminarea".

When clicking in the table an alert is presented.

The link #adduser is still visible after content has been loaded. When pressing it again the admin_agent_area.php is once again loaded and the table as well. Clicking inside the table now presents the alert two times after each other. This is bad, it should be only one time. I can see in Firebug that things are indeed happening twice when I want it to happen only once.

I have had similar problem and solved it by using .empty before loading the content. But when doing that, everything was on the same side.

index.php part of structure

< a id="adduser"> Add user < /a>

< div id = "adminarea">< /div>

admin_agent_area.php part of structure

< div id="modalarea">< /div>

< div id="usertable">< /div>

admin_agent_area.php My javascript loaded with index.php

$(document).ready(function() { 
      $("#adduser").click(function () {
                $("#adminarea").empty();
                    $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) { }); 

            });
});

All content from admin_agent_area.php is loaded into div #adminarea in index.php. I thought that making sure i .empty it before loading the new content would, so to speak, reset entire #adminarea, like if I never had loaded anything before.

This is the javascript loaded together with admin_agent_area.php. When clicking a row in the table, this script is triggered:

$("table[id$='agents'] td:nth-child(1)").live('click',function(event)  

        {  
            $("#usertable").empty();
            alert(开发者_高级运维"loadupdatagent");

            event.preventDefault();  

            var $td= $(this).closest('tr').children('td');  

            var $agentid=$td.eq(2).text();  

        $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){ 
            $("#modalarea").empty();
            $("#modalarea").html(data);
            $('#modalarea').css("visibility","visible");
        });

And as you can see, this is the script where the alert is.

id=#modalarea is the area where some content is supposed to be loaded once the table row has been clicked. It shouldn't matter for the problem itself, but I can see in Firebug that the .get request is made twice as well.

How do I fix this problem? I don't think the HTML code should be needed, please let me know and I will add it as well.

Try this:

$("table[id$='agents'] td:nth-child(1)").live('click',function(event) {
    if($(this).is('#adduser'))
    {
        $("#adminarea").empty();
        $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) { }); 
    }
    else
    {
        // rest of function....
    }
});

Instead of empty() try using remove(true). That will effectively act as if the HTMLElement was never on the page. The true means that all event handlers will be unregistered as well.

Ok, this was (for me) a tuff one.

When loading admin_agent_area.php it will load the .js file as well since the < script...> tag was defined in that file. When clicking "#adduser" several times the admin_agent_area.php and, hence, the .js file is loaded several times as well.

I don't understand how event handlers are binded to elements, but in some way, each time I load I do get more event handlers for my elements. At least that's how it looks like.

The solution for me was to load the .js file from index.php dynamically. Of some reason it doesn't work loading the .js file in the < script....> of index.php, the scripts doesn't seem to be visible for the dynamically loaded content. Don't hesitate to explain this if you know about it. But I guess it's not possible to first load a .js file if the elements are not available to bind event handlers to.

 $(document).ready(function() {
      var register_agent_page;   
      $("body").delegate("#adduser", "click", function (event) {                
                        if(register_agent_page==null){ 
                            $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) {
                                    register_agent_page = data;
                                    $.getScript("http://localhost/SMICAdmin/adminactivities/admin_agent_script.js");
                                    $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");                                             

                            }); 
                        }else{

                            $("#adminarea").html(register_agent_page);                         
                            $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");                                             
                        }
  });

I am making sure that I only load the page the first time, don't know if it matters but it saves some requests. The .js file is loaded the first time I am clicking "#adduser" as well. Now, the .js file will be called only once.

What doesn't work properly is to automatically load the data into user "#usertable" from the .js file when it has been loaded. First time is fine, but second time I hit "#adduser" the .js file is already loaded and I need to load the user table in a different way. Hence, I load the table and add it to div "#usertable" from within the javascript file loaded by index.php.

Puh!

Hey regarding the script not being accessible to dynamic pages is not true.

Event handlers are registered at the load of the script and so it is not registering those elements created dynamically. The solution for this using 'on' function of jquery which allows you to bind elements even after the script has been loaded.

@Nicsoft

If anyone has read my comment jquery doesn't add event handlers after the dom is loaded so u need to use 'on' function, delegate,live function is the older one and is going to removed soon. 'on' is the replacement to add event handlers for dynamically loaded elements.

http://api.jquery.com/on/

this is the link to the on command

$(" < any element that doesn't load dynamically like body > ").on(' < event name > ', ' < actual element loading dynamically > ', function(){ // code you want to perform for the event });