VPF::Jquery не слышит событие - Форум программистов

Areostar

Дата 20.7.2013, 20:20 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: нет
Всего: -2

имеется небольшой скрипт:

Код


$(document).ready(function(e)
 { 
    var interval = false;
    function timer() 
    {
        var monthString; 
        var dayString;
                
        var tempData = new Date();
      
        var fullYear = tempData.getFullYear();
        var currentMonth = tempData.getMonth();
        var currentDate = tempData.getDate();
        var currentDay = tempData.getDay();
      
        var currentHours = tempData.getHours();
        var currentMinutes = tempData.getMinutes();
        var currentSeconds = tempData.getSeconds();
      
        if(currentMonth == 0) {  monthString = " January";  }
        if(currentMonth == 1) {  monthString = " February";  }
        if(currentMonth == 2) {  monthString = " March";  }
        if(currentMonth == 3) {  monthString = " April";  }
        if(currentMonth == 4) {  monthString = " May";  }
        if(currentMonth == 5) {  monthString = " June";  }
        if(currentMonth == 6) {  monthString = " July";  }
        if(currentMonth == 7) {  monthString = " August";  }
        if(currentMonth == 8) {  monthString = " September";  }
        if(currentMonth == 9) {  monthString = " October";  }
        if(currentMonth == 10) {  monthString = " November";  }
        if(currentMonth == 11) {  monthString = " December";  }
      
        if(currentDay == "0") {  dayString = " Monday  ";  }
        if(currentDay == "1") {  dayString = " Tuesday  ";  }
        if(currentDay == "2") {  dayString = " Wednesday  ";  }
        if(currentDay == "3") {  dayString = " Thursday  ";  }
        if(currentDay == "4") {  dayString = " Friday  ";  }
        if(currentDay == "5") {  dayString = " Saturday  ";  }
        if(currentDay == "6") {  dayString = " Sunday  ";  }
          
        if(currentSeconds < 10) {  currentSeconds = "0" + currentSeconds;  }
        if(currentMinutes < 10) {  currentMinutes = "0" + currentMinutes;  }
        if(currentHours < 10) {  currentHours = "0" + currentHours;  }
      
        var dataString = "<p> year " +fullYear +" "+  currentDate + " of" + monthString + "  " + dayString + currentHours + ":" + currentMinutes + ":" + currentSeconds + "</p>";
        var versionString = "<p>MagicList version 0.1 July 3013</p>";
        var authorString = "<p>Written by Shtihov Anton</p>";
          
        $(".data_time").html("<table><tr><td>"+ dataString +"</td><td>"+ versionString +"</td><td>"+ authorString +"</td></tr></table>");
        $(".topMenu").html("<table><tr><td id='simple'>Simple List</td><td id='statistic'>Statistic List</td><td id='diagramm'>Diagram List</td></tr></table>");
    }
    
    $("#simple").click(function(){
        alert("ALERT!!!!");
    });
    
    $(window).load(function(){
        if(!interval)
            interval = setInterval(timer, 1000);
    }); 
 });

Внем вывожк страницу первый див с чисами датой и прочей инфой - тут всё впорятке

второй див с простой таблицей - тоже появляется

По вот пытаюсь приципить слушатель на клик по одной из ячеек:

Код


$("#simple").click(function(){
        alert("ALERT!!!!");
    });

Не работает. и не могу понять почему?

Amphiluke

Дата 20.7.2013, 21:16 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Не работает потому, что обработчики событий можно добавлять только к элементам, которые уже присутствуют в документе на момент регистрации обработчика. В вашем случае это не так (таблица создается позже, динамически).
В вашем случае подойдет прием делегирования обработки событий родительскому элементу, который статически присутствует в документе. Например:

Код


$(".topMenu").on("click", "#simple", function () {
    alert("ALERT");
});

Этот ответ добавлен с нового Винграда - http://vingrad.com

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »