jQuery не запускается ‹script›, когда метод AJAX $.load() вызывается событием Click

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

Вот код:

$(document).ready(function() {

$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
    console.log('click2 loaded');
    $(this).hide()
    .fadeIn(3000);

    $('#click2').click(function(e) {
        e.preventDefault(); 
        console.log('click2 clicked');  
        $('#bizdev').load('pagewithscripttags.php', function (data) {
            console.log(data);
            console.log('#bizdev is loaded, but scripts are not run');
            $('#bizdev').hide();
            console.log('bizdev hidden');
        });                      
        $('#content').hide();
        $('#bizdev').show();
    });
});  

Когда я запускаю это (из внешнего файла js), файл pagewithscripttags.php загружается в DOM по событию клика, но скрипты не выполняются, и я не могу понять, почему. ПОМОГИТЕ!

Однако, когда я перемещаю метод загрузки в функцию обратного вызова первой загрузки, файл вставляется в DOM и запускаются сценарии:

$(document).ready(function() {

$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
    console.log('click2 loaded');
    $(this).hide()
    .fadeIn(3000);

    $('#bizdev').load('pagewithscripttags.php', function (data) {
            console.log(data);
            console.log('#bizdev loaded and scripts are run');
            $('#bizdev').hide();
            console.log('#bizdev hidden');
    }); 

    $('#click2').click(function(e) {
        e.preventDefault(); 
        console.log('click2 clicked');  
        $('#content').hide();
        $('#bizdev').show();
    });
});  

Почему скрипты запускаются как часть функции обратного вызова, а не по событию щелчка (когда мне нужно, чтобы они запускались)?

Вот содержимое pagewithscripts.php:

<script>console.log('this script was run');</script>
<script type="IN/MemberProfile" data-id="http://linkedin.com/publicprofileurl" data-format="inline" width='106px' data-related="false"></script> 

Первый скрипт запускается и отображается в console.log, а второй просто вставляется в DOM без запуска, за исключением случаев, когда я помещаю метод .load() вне обработчика кликов.

(Мне нужно загрузить сценарии по событию щелчка, потому что они выполняются несколько секунд (они вызывают API LinkedIn), и когда я запускаю их в готовом документе, происходит зависание/отставание.)


person edpeciulis    schedule 27.12.2011    source источник
comment
Если все, что вы хотите загрузить, это скрипт LinkedIn, не могли бы вы просто создать его немедленно (вместо того, чтобы использовать ajax для его получения?). Что-то вроде: $('<script type="IN/MemberProfile" ... data-related="false"></script> ').appendTo(document.body) вместо: $('#bizdev').load('pagewithscripttags.php'...   -  person powerbuoy    schedule 28.12.2011


Ответы (3)


Вероятно, вам нужно сообщить платформе LinkedIn о повторном сканировании страницы.

IN.parse(domNode)

Это описано в справочном документе JavaScript API по событиям здесь: https://developer.linkedin.com/documents/inauth-inevent-and-inui

person Kirsten Jones    schedule 28.12.2011

Загрузите тип данных скрипта http://api.jquery.com/jQuery.getScript/

person Adam Merrifield    schedule 27.12.2011
comment
Я посмотрел на .getScript() и использовал eval для запуска скриптов, но это не сработало бы без перезаписи виджета LinkedIn. Использование .ajax() с dataType: скрипт не работает. Использование .ajax() с dataType: html дает тот же результат, что и использование .load(). - person edpeciulis; 28.12.2011

На самом деле функция jQuery 'click()' не будет обрабатывать событие click динамических элементов, поэтому попробуйте on() или live(), чтобы ваш код работал нормально, с помощью этих функций вы можете переместить код обработчика кликов из первого обратного вызова load().

К вашему сведению: попробуйте заменить свой код $('#click2').click(function(e) { этим кодом $('#click2').live("click", function(e) {.

Примечание. Функция live() устарела, начиная с версии jQuery 1.7.

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

person Siva    schedule 27.12.2011
comment
Возможно, я не понял, что вы предлагаете, но мне кажется, что метод .click() ОБРАБАТЫВАЕТ событие «щелчок», потому что он предотвращает действие по умолчанию, успешно выводит в console.log и вызывает второй метод .load(). Однако .load() удаляет НЕКОТОРЫЕ блоки скрипта вместо того, чтобы запускать их, как предполагалось. Я согласен с тем, что on() или delegate() позволят переместить код обработчика за пределы первого обратного вызова load(), но почему сценарии должны работать по-другому? - person edpeciulis; 28.12.2011