Не работает ajax при клике по тегу с указанным id

@IvanKrep · Регистрация: 18.09.2014

Студворк — интернет-сервис помощи студентам

Добрый вечер уважаемые форумчане.Изучаю js совсем недавно и пытаюсь сделать такую вещь:
Есть блок:

HTML5
1
2
3
4
5
6
<div id ="top_sidebar">
   <ul>
    <li><p id ="load">Управление товарами</p></li>
    <li><p>Управление Акциями</p></li>
   </ul>
</div>

для ид. #load по клику выполняется ajax.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function funcBefore(){
            $("#inf").text("Ожидание данных...");
 
        }
 
        function funcSuccess(type){
            $("#inf").html(type);
            document.getElementById("top_sidebar").innerHTML="<ul><li><p id ='load2'>Добавить товар</p></li><li><a href='http://localhost/mein/cms/index.php'><p>Назад</p></a></li></ul>";
        }
        var type = 'wt';
 
        $(document).ready(function(){
            $("#load").bind("click",function(){
                $.ajax({
                    url: "blocks/content_products.php",
                    type: "POST",
                    data: ({type}),
                    dataType: "html",
                    beforeSend: funcBefore,
                    success: funcSuccess 
                });
            });
        });

В функции funcSuccess,

JavaScript
1
2
3
4
        function funcSuccess(type){
            $("#inf").html(type);
            document.getElementById("top_sidebar").innerHTML="<ul><li><p id ='load2'>Добавить товар</p></li><li><a href='http://localhost/mein/cms/index.php'><p>Назад</p></a></li></ul>";
        }

Я изменяю у блока top_sidebar его содержимое,где меняю у тега <p id = 'load2'> идентификатор.
Теперь я хочу,чтобы при клике по этому тегу с идентификатором #load2 вып. др. ajax запрос.
Пробовал делать по аналогии:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function funcBefore(){
            $("#inf").text("Ожидание данных...");
 
        }
 
        function funcSuccess(type){
            $("#inf").html(type);
        }
        var type = 'wt';
 
        $(document).ready(function(){
            $("#load2").bind("click",function(){
                $.ajax({
                    url: "blocks/add_products.php",
                    type: "POST",
                    data: ({type}),
                    dataType: "html",
                    beforeSend: funcBefore,
                    success: funcSuccess 
                });
            });
        });

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

@Vadim_Lasso · 08.09.2015, 02:20

Проблема в том, что для обработчиков событий вы используете метод bing, но он не позволяет создать обработчик до того, как элемент появится в DOM-е.
Т.e. в вашем случае, когда "меняю у тега <p id = 'load2'> идентификатор", bing "не видит" этот новый идентификатор в DOM-e.
Поэтому, вместо bing просто используйте другой метод live, в котором используется делегирование (всплытие событий).
А еще лучше, вместо live использовать метод on, который объединяет возможности как bind, так и live. Но если вы используете не самую свежую версию JQuery, то данный метод может быть недоступен.

JavaScript
1
2
3
$("#load").on("click", function() {
...
$("#load2").on("click", function() {

@Lazy_Den · 08.09.2015, 08:31

Не по теме:

Сообщение от LASSO

используете метод bing

Очепятка bind

@IvanKrep · 08.09.2015, 14:23 **[ТС]**

LASSO, спасибо Вам большое.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@IvanKrep 1 / 1 / 0 Регистрация: 18.09.2014 Сообщений: 101
	08.09.2015, 14:23 [ТС]
	LASSO, спасибо Вам большое. 0

Не работает ajax при клике по тегу с указанным id

Решение