JQuery запускается дважды на динамической странице

Question

Моя проблема: у меня есть страница index.php, которая динамически загружает некоторое HTML-содержимое из admin_agent_area.php в некоторые div (#adminarea) в index.php. Это происходит при нажатии на ссылку «#adduser» и функция jquery обрабатывает загрузку и вставку. Теперь в admin_agent_area.php. У меня есть некоторые другие div (#usertable), который загружается с таблицей, когда был загружен admin_agent_area.php.

id = # adduser - это ссылка () в index.php, вне "adminarea".

При нажатии в таблице выдается предупреждение.

Ссылка #adduser по-прежнему видна после загрузки контента. При повторном нажатии снова загружается файл admin_agent_area.php, а также таблица. Щелчок внутри таблицы теперь выводит предупреждение два раза друг за другом. Это плохо, это должно быть только один раз. Я вижу в Firebug, что вещи действительно происходят дважды, когда я хочу, чтобы это происходило только один раз.

У меня была похожая проблема, и я решил ее, используя .empty перед загрузкой контента. Но при этом все было на одной стороне.

index.php часть структуры

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

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

admin_agent_area.php часть структуры

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

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

admin_agent_area.php Мой JavaScript загружен с index.php

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

            });
});

Весь контент из admin_agent_area.php загружается в div #adminarea в index.php. Я подумал, что, убедившись в том, что я загрузлю его перед загрузкой нового контента, можно будет, так сказать, сбросить всю #adminarea, как если бы я никогда ничего не загружал раньше.

Это javascript, загружаемый вместе с admin_agent_area.php. При щелчке строки в таблице запускается этот скрипт:

$("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");
        });

И, как вы можете видеть, это сценарий, в котором находится предупреждение.

id = # modalarea - это область, в которую предполагается загружать некоторый контент после щелчка по строке таблицы. Это не должно иметь значения для самой проблемы, но я вижу в Firebug, что запрос .get выполняется также дважды.

Как мне исправить эту проблему? Я не думаю, что HTML-код должен быть необходим, пожалуйста, дайте мне знать, и я добавлю его также.

Answer 1

@ Nicsoft

Если кто-то прочитал мой комментарий, jquery не добавляет обработчики событий после загрузки dom, так что вам нужно использовать функцию on, делегировать, функция live - старая и собираетсячтобы удалить в ближайшее время.'on' - замена для добавления обработчиков событий для динамически загружаемых элементов.

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

это ссылка на команду on

$ ("<любой элемент"которая не загружается динамически, как body> ") .on ('<имя события>', '<фактическая загрузка элемента динамически>', function () {// код, который вы хотите выполнить для события});

Answer 2

Привет, что сценарий недоступен для динамических страниц.

Обработчики событий регистрируются при загрузке скрипта, поэтому он не регистрирует те элементы, которые создаются динамически.Решение этой проблемы заключается в использовании функции jquery 'on', которая позволяет связывать элементы даже после загрузки скрипта.

Answer 3

Вместо empty() попробуйте использовать remove(true). Это будет эффективно действовать так, как будто HTMLElement никогда не был на странице. true означает, что все обработчики событий также будут незарегистрированными.

Answer 4

Хорошо, это (для меня) туф.

При загрузке admin_agent_area.php он также загрузит файл .js, так как в этом файле был определен тег .При нажатии «#adduser» несколько раз на admin_agent_area.php и, следовательно, файл .js также загружается несколько раз.

Я не понимаю, как обработчики событий связаны с элементами, но в некотором смысле, каждый раз, когда я загружаю, я получаю больше обработчиков событий для своих элементов.По крайней мере, так это выглядит.

Решением для меня было динамическое скачивание файла .js из index.php.По какой-то причине загрузка файла .js в файла index.php не работает, сценарии не отображаются для динамически загружаемого содержимого.Не стесняйтесь объяснять это, если вы знаете об этом.Но я думаю, что сначала невозможно загрузить файл .js, если элементы недоступны для привязки обработчиков событий.

 $(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");                                             
                        }
  });

Я проверяю, загружаю ли я страницу только в первый раз, не знаю, имеет ли это значение, но она сохраняет некоторые запросы.Файл .js загружается при первом нажатии кнопки "#adduser".Теперь файл .js будет вызываться только один раз.

Что не работает должным образом, так это автоматическая загрузка данных в пользователя "#usertable" из файла .js после его загрузки.Первый раз в порядке, но во второй раз, когда я нажимаю "#adduser", файл .js уже загружен, и мне нужно загрузить таблицу пользователя другим способом.Следовательно, я загружаю таблицу и добавляю ее в div "#usertable" из файла javascript, загруженного index.php.

Пух!

Answer 5

Попробуйте это:

$("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....
    }
});