Переменная Javascript в запросе href onclick - PullRequest
Новая
       22

Переменная Javascript в запросе href onclick

5 голосов
/ 21 октября 2011

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

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

У меня это работает с ниже, но он говорит, что "XYZ не определено" 

function renderLink(value, meta, record)
        {
            var type = record.data['name']; //value is XYZ  


            return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';
        }

function getReport(type){

    alert(type);
}

Ответы [ 3 ]

9 голосов
/ 21 октября 2011 
return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';

Вам необходимо экранировать строку: 

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';
1 голос
/ 21 октября 2011

Если вы посмотрите на визуализированный HTML, вы увидите проблему: ваш getReport вызов выглядит следующим образом: 

getReport(XYZ);

Полагаю, вам нужны цитаты об этом, поэтому: 

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';

... что делает: 

getReport('XYZ');

Живой пример

Несколько более эзотерически, но когда вы выводите атрибут onclick как часть источника HTML, это, конечно, атрибут HTML, что означает, что вы можете использовать символьные объекты. Таким образом, вы могли бы использовать &quot; сущность: 

return '<a href="javascript:void(0);" onclick="getReport(&quot;'+type+'&quot;); return false;"></a>';

Живой пример

Я отмечаю это не потому, что рекомендую это (я не рекомендую), а потому, что полезно помнить, что на самом деле происходит в атрибуте onclick. Это одна из причин, по которой я настоятельно рекомендую использовать правильный обработчик событий (например, через addEventListener / attachEvent или даже просто присвоить свойству a элемент onclick после его создания).

Важно отметить, что этот способ также очень чувствителен к содержимому из record.data['name']. Например, рассмотрим, что произойдет, если вместо XYZ это Tom's. Выход первого варианта выше будет 

getReport('Tom's');

... что, очевидно, является проблемой. Точно так же, если в тексте есть обратная косая черта, он будет рассматриваться как символ перехода на результат и т. Д. И т. Д. & Mdash; немного минного поля.

Если вы можете изменить renderLink, чтобы он возвращал реальный экземплярный a элемент, а не строку, это то, что я бы сделал: 

function createLink(value, meta, record)
{
    var type = record.data['name'];         // Grab value as of when we were called
    var link = document.createElement('a');

    link.href = "javascript:void(0);";
    link.onclick = function() {             // Or even better, addEventListener / attachEvent
        getReport(type);
        return false;
    };

    return link;
}

Это создает ссылку и замыкание , которое обращается к type, не превращая его в текст и обратно. (Не беспокойтесь, если вы не знакомы с замыканиями, замыкания не сложны .)

Живой пример

0 голосов
/ 21 октября 2011

getReport получает XYZ как переменную, а не строку, вы должны поместить это в кавычки: 

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';
...