Добавление функций onclick в динамические ссылки HTML

-1

У меня есть программа, которая динамически добавляет ссылки на таблицу. Каждая ссылка уникальна и используется для отображения IFRAME при выборе:Добавление функций onclick в динамические ссылки HTML

function buildIframeLink(url){ 
    var link = document.createElement('a'); 
    link.setAttribute('href', '#'); 
    link.setAttribute('onclick', 'displayIframe("' + url + '")'); 
    link.className = 'iframeLink'; 
    link.innerHTML = 'Open'; 
}

только связь построена я передать его на другую функцию:

function displayIframe(url){ 
    //creates iframe based on the URL

Весь якорь тег создается следующим образом:

<a class="iframeLink" href="#" onclick="displayIframe("http://localhost:8080/myapp/abc/xyz");">Open</a>

Однако при каждом нажатии на ссылку на эталонный Ошибка возвращается:

ReferenceError: displayIframe is not defined

Моя функция определенно определена; Я читал, что это проблема с динамически созданным HTML-содержимым - есть ли чистое решение для javascript для решения этой проблемы?

Примечание * Использование link.onclick = displayIframe (URL) запускает функцию немедленно, которая не подходит для моего приложения

источник

2015-03-15 Kurai Bankusu

могли бы вы предоставить окончательный полный html вашего приложения? –

Для чего вам нужен полный html? –

для отладки вашего кода после рендеринга .. Если вы сказали, что функция определена, иногда ошибки typo вызывают то, с чем вы сталкиваетесь –

вы можете использовать закрытие

link.onclick = (function(_url) 
{ 
    return function() 
    { 
     displayIframe(_url); 
    } 
})(url);

источник

2015-03-15 20:24:47 wasikuss

Спасибо Wasikuss, похоже, это работает –

попробовать это в одинарные кавычки, а не двойной

<!DOCTYPE html> 
<html> 
<head> 

    <title>Test</title> 
    </head> 


    <script type="text/javascript"> 
    function displayIframe(url){ 
    alert(url); 

} 

    </script> 

    <body> 
<a class="iframeLink" href="#" Onclick="displayIframe('http://localhost:8080/myapp/abc/xyz');">Open</a> 


</body> 
</html>

источник

2015-03-15 20:38:45

Одиночные кавычки, похоже, возвращают ту же ошибку. Вот как я воссоздал ссылку 'link.setAttribute ('onclick', 'displayIframe (\' '+ url +' \ ')'; и сгенерированный якорь создается с одинарными кавычками так же, как вы определили –

ok в приведенном выше примере отлично работает .. вот почему я спросил ваш окончательный html^_^ –

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

Это, кажется, работает нормально ....

Если вы ВГА e любые проблемы с этим рассказывают мне, какие проблемы есть, и я попробую разрешить их для вас и объясню причины (причины) и решения (ы) за ним.

Вам нужно использовать одинарные кавычки, чтобы обернуть URL-адрес в вызов функции, используя двойные кавычки, нарушит атрибут onclick.

Ваш текущий атрибут OnClick будет читаться как

onclick="displayIframe("

Двойные кавычки используются перед URL закрывает атрибут OnClick.

Назад сеча одиночные кавычки (\''+url+'\') даст вам правильный вывод:

onclick="displayIframe('http://localhost:8080/myapp/abc/xyz');"

Рабочая демо

function buildIframeLink(url){ 
 
    var link = document.createElement('a'); 
 
    link.setAttribute('href', '#'); 
 
    link.setAttribute('onclick', 'displayIframe(\''+url+'\');'); 
 
    link.className = 'iframeLink'; 
 
    link.innerHTML = 'Open'; 
 
    document.getElementById('Demo_display').appendChild(link); 
 
} 
 
function displayIframe(url){ 
 
alert('Iframe url = '+url); 
 
} 
 
window.onload=function(){ 
 
    buildIframeLink('http://localhost:8080/myapp/abc/xyz'); 
 
}

<div id="Demo_display"></div>

источник

2015-03-15 20:59:05 NewToJS

Благодаря @NewToJS этот метод действительно работает, но только не для моего приложения, которое вызывает недоумение, и я пытаюсь выяснить, почему. Если вы проверите ответ wasikuss, который использует закрытие, он запускает функцию соответствующим образом, хотя он не добавляет какие-либо функции onclick самому тегу привязки –

@ClayBanks Что значит, что он не работает с вашим приложением, если вы обратный слэш одинарные кавычки, используемые для обертывания url в вызове функции, должны работать очень хорошо. Возможно, у вас есть проблемы с другими частями вашего приложения? Это только исправление атрибута onclick, поскольку это единственная проблема в исходном коде, который вы опубликовали. – NewToJS

TRUST me, синтаксис моего якорного тега на 100% хорош. По какой-то причине, неизвестной мне, он не распознает функцию displayIframe() (вероятно, из-за другой части приложения).Очень странно, как кажется, что этот метод работает 'link.onclick = function() {displayIframe (url)};' также –

Добавление функций onclick в динамические ссылки HTML

ответ

Смежные вопросы