рекурсивная функция не получает вызов в jquery при динамическом создании тега привязки

Question

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

Пока вкладки создаются, но переключение не происходит, потому что вызов, созданный функцией onclick, не звонят.

вот пример кода и скриншот ниже:

aTag = $("<a href='#' onclick='nGActiveSheet="+nTabs+";makeView1("+ data +");'>"+sCurrTab+"</a>");

Функция makeView1 принимает один параметр как объект

Answer 1

Когда вы вводите код javascript непосредственно в атрибут onclick элемента, он выполняется в глобальной области. Затем он потеряет все ссылки на локальные переменные.

В вашем случае, вероятно, что makeView1 не является глобальным и, следовательно, не определено, когда все выполняется в глобальной области.

Рассмотрите следующее snippet: makeView1 и test существуют как в глобальной области, так и локально в IIFE (немедленно вызываемое выражение функции). Но когда вы нажимаете на ссылку, вы видите, что это вызываемая глобальная функция и используемая глобальная переменная test (вы можете дважды щелкнуть, чтобы убедиться, что значение установлено на 1.

Вы также заметите, что data передается неправильно, когда он объединяется со строкой в ​​атрибуте, используется [object Object].

var test = "global";
var data = { foo: 'global' };
function makeView1(_data){
    console.log('global: ', _data);
    console.log('test: ', test);
}

(function(){
    var test = "local";
    var data = { foo: 'local' };
    function makeView1(_data){
        console.log('local: ', _data);
        console.log('test: ', test);
    }
    
    aTag = $('<a href="#" onclick="makeView1(\''+ data +'\');test=1;">TEST</a>');
    aTag.appendTo('body');
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

В этом случае гораздо лучше использовать jQuery способ присоединения обработчиков событий с синтаксисом on('click', function). Таким образом, функция-обработчик «запомнит» область, в которой она была создана, и вы не застрянете с глобальными переменными.

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

var test = "global";
var data = { foo: 'global' };
function makeView1(_data){
    console.log('global: ', _data);
    console.log('test: ', test);
}

(function(){
    var test = "local";
    var data = { foo: 'local' };
    function makeView1(_data){
        console.log('local: ', _data);
        console.log('test: ', test);
    }
    
    aTag = $('<a href="#">TEST</a>');
    aTag.on('click', function(e){
        makeView1(data);
        test = 1;
    });
    aTag.appendTo('body');
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>