Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Динамическое создание линка, не работает onclick  
V
    Опции темы
t77
  Дата 23.2.2010, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
Доброе время суток.
Мне необходимо динамически создать линк.
Пишу следующее:
Код

newlink = document.createElement("a"); 
newlink.setAttribute("class", "linkClass"); 
newlink.setAttribute("href", "#");                        
newlink.innerText = "click me";                                        
newlink.setAttribute("onclick", "alert('New link');");

Почему не работает onclick ?
И как заставить его работать ?
PM MAIL   Вверх
Amphiluke
Дата 23.2.2010, 15:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Код

newlink.onclick = function() {alert('New link');};
PM   Вверх
t77
Дата 23.2.2010, 15:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
 smile 
Спасибо!
PM MAIL   Вверх
Amphiluke
Дата 23.2.2010, 16:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Кстати, раз уж вы пишете для IE, имейте в виду, что установка атрибута class для IE должна производиться не так, как для остальных браузеров
Код

// IE only
newlink.setAttribute("className", "linkClass");


кроссбраузерно это можно делать так:
Код

newlink.className = "linkClass"; 
PM   Вверх
t77
Дата 23.2.2010, 16:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
Спасибо за совет.

Вы знаете я тут пытаюсь сделать кое что интересное но у меня не получается, может можете мне помочь...
Дело в том, что я создаю линки в цикле и хочу передать ему в событие ОНКЛИК функцию с параметрами. Не получается.
вот мой цикл, который создает линки:
Код

var myDivBody = document.all[myDivID];
var fromVal;
var toVal;
for(var i=0; i<5; i++)
{
    fromVal = "abc"+i;
    toVal = "bcd"+i

    newlink = document.createElement("a"); 
    newlink.className = "pageNumber";                        
    newlink.setAttribute("href", "#");                        
    newlink.innerText = i+1;

    newlink.onclick = function() {drawAuthTable(TBODYId, dataPath, showElement, fromVal, toVal);};

    myDivBody.appendChild(newLink);
}

А это функция, которую я хочу вызывать при нажатии на вышесозданные линки:
Код

function drawAuthTable(TBODYId, dataPath, showElement, fromVal, toVal)
{
.....
.....
}

Тоесть в онклике каждого линка мне необходимо вызывать функцию drawAuthTable, с определенными параметрами.
Как это сделать?
PM MAIL   Вверх
Amphiluke
Дата 23.2.2010, 16:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Можно собрать все передаваемые параметры в массив (если параметров у ф-ции несколько, то — в двумерный массив или массив объектов), а потом в цикле подставлять параметры, обращаясь с помощью индекса i к элементам массива.

Добавлено @ 16:59
Выглядеть это может примерно так:
Код

    function createLink() {
        var params = [
            {TBODYId:"TBODYId0", dataPath:"dataPath0", showElement:"Element0", fromVal:"fromVal0", toVal:"toVal0"},
            {TBODYId:"TBODYId1", dataPath:"dataPath1", showElement:"Element1", fromVal:"fromVal1", toVal:"toVal1"},
            {TBODYId:"TBODYId2", dataPath:"dataPath2", showElement:"Element2", fromVal:"fromVal2", toVal:"toVal2"},
            {TBODYId:"TBODYId3", dataPath:"dataPath3", showElement:"Element3", fromVal:"fromVal3", toVal:"toVal3"},
            {TBODYId:"TBODYId4", dataPath:"dataPath4", showElement:"Element4", fromVal:"fromVal4", toVal:"toVal4"}
        ];
        for(var i=0; i<5; i++) {
            newlink = document.createElement("a"); 
            newlink.className = "pageNumber";
            newlink.setAttribute("href", "#");
            newlink.innerHTML = i+1;
            var param = params[i];
            newlink.onclick = function() {
                drawAuthTable(param.TBODYId, param.dataPath, param.showElement, param.fromVal, param.toVal);
            }
            document.body.appendChild(newlink);
        }
    }


Это сообщение отредактировал(а) Amphiluke - 23.2.2010, 17:14
PM   Вверх
Amphiluke
Дата 23.2.2010, 17:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Подправил пример...
PM   Вверх
t77
Дата 23.2.2010, 17:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
Ок, сейчас вот пробую...
Еще вот какое дело, как мне установить расстояние между линками?
Тоесть как вставить между линками
Код

&nbsp;
 ?
PM MAIL   Вверх
Amphiluke
Дата 23.2.2010, 17:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Цитата(t77 @  23.2.2010,  20:17 Найти цитируемый пост)
как мне установить расстояние между линками?

добавьте сюда
Код

myDivBody.appendChild(newLink);
myDivBody.appendChild(document.createTextNode("\u00A0"));


Это сообщение отредактировал(а) Amphiluke - 23.2.2010, 17:20
PM   Вверх
t77
Дата 23.2.2010, 17:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
Супер! Пробел установлен smile 
Что же касается установления onclick-a каждому линку, то ...
Исходя из вашего объяснения, понял, что параметры для функции передаются обычным образом...
Поэтому я не стал пользоваться вашим методом, тоесть не делал массив. Просто передаю параметры, самым обычным образом.
Код

function createLinks(PagingDivID, totalResult, maxResultPerPage, userResTable, url, userResDiv)
        {
            cleanDivListById(PagingDivID);
        
            var PagingDivBody = document.all[PagingDivID];
            var tResult = totalResult;
            var mrpp = maxResultPerPage;
            numOfPages = tResult/mrpp;
            var from = "";
            var to = "";
            
            for(var i=0; i<numOfPages; i++)
            {
                from= i*mrpp;
                to= from+mrpp+1;
                
                newlink = document.createElement("a"); 
                newlink.className = "pageNumber";                        
                newlink.setAttribute("href", "#");                        
                newlink.innerText = i+1;    
                                                                                                                                
                newlink.onclick = function() 
                {
                    drawAuthTable(userResTable, url, userResDiv, from, to);
                };
                

                PagingDivBody.appendChild(newlink);
                PagingDivBody.appendChild(document.createTextNode("\u00A0"));
                                        
            } 
        }
        function drawAuthTable(TBODYId, dataPath, showElement, fromVal, toVal)
        {
            .....
        }

Но видимо, что то я не понимаю, так как при нажатии на любой линк получаю результат установленный при i=3 ?
Почему ? Объясните пожалуйста где моя ошибка ?
PM MAIL   Вверх
Amphiluke
Дата 23.2.2010, 17:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Блин, это и мой «косяк» тоже. smile  Похоже, накосячил с видимостью переменных. onclick видит только переменные, которые были при последнем прогоне цикла...

Пример можно исправить так (ваш код пока не смотрел).
Код

    var params = [
        {TBODYId:"TBODYId0", dataPath:"dataPath0", showElement:"Element0", fromVal:"fromVal0", toVal:"toVal0"},
        {TBODYId:"TBODYId1", dataPath:"dataPath1", showElement:"Element1", fromVal:"fromVal1", toVal:"toVal1"},
        {TBODYId:"TBODYId2", dataPath:"dataPath2", showElement:"Element2", fromVal:"fromVal2", toVal:"toVal2"},
        {TBODYId:"TBODYId3", dataPath:"dataPath3", showElement:"Element3", fromVal:"fromVal3", toVal:"toVal3"},
        {TBODYId:"TBODYId4", dataPath:"dataPath4", showElement:"Element4", fromVal:"fromVal4", toVal:"toVal4"}
    ];
function createLink() {
    for(var i=0; i<5; i++) {
        newlink = document.createElement("a"); 
        newlink.className = "pageNumber";
        newlink.setAttribute("href", "#");
        newlink.innerHTML = i+1;
        var param = params[i];
        var foo = new Function("drawAuthTable('" + param.TBODYId + "','" + param.dataPath + "','" + param.showElement + "','" +
            param.fromVal + "','" + param.toVal + "')");
        newlink.onclick = foo;
        document.body.appendChild(newlink);
        document.body.appendChild(document.createTextNode("\u00A0"));
    }
}
function drawAuthTable(TBODYId, dataPath, showElement, fromVal, toVal) {
    alert(TBODYId + "\n" + dataPath + "\n" + showElement + "\n" + fromVal + "\n" + toVal);
}


Добавлено через 13 минут и 25 секунд
А параметры userResTable и userResDiv какой имеют тип? Строковый? Объекты?
PM   Вверх
t77
Дата 23.2.2010, 18:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
Параметры userResTable и userResDiv имеют типа стринг.
Я сделал так:
Код

var func = new Function("drawAuthTable('" + userResTable + "','" + url + "','" + userResDiv + "','" +from + "','" + to + "')");
newlink.onclick = func;

Оппа... Вот оно! Заработало!
Скажите пожалуйста данный пример кроссбраузерный?
Спасибо вам большое.
PM MAIL   Вверх
Amphiluke
Дата 23.2.2010, 18:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 39
Всего: 112
Цитата(t77 @  23.2.2010,  21:11 Найти цитируемый пост)
Скажите пожалуйста данный пример кроссбраузерный?

Да.
PM   Вверх
t77
Дата 23.2.2010, 18:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет
Большое, человеческое вам спасибо.
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0600 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.