jQuery appendTo дает неверный аргумент в IE

Question

Я пытаюсь создать интерфейс для swfobject, найденный по адресу http://code.google.com/p/swfobject/. Я создаю необходимый запасной контент, когда у пользователя нет установленного флеш-плеера. Это нормально работает в FF, но не в IE по какой-то причине. Я сделал это таким же образом миллион раз раньше, и он всегда работал, я не могу понять, почему я получаю эту ошибку на этот раз.

В основном, когда страница загружается, она вызывает функцию $ .SWFObject.embedSWF(), которая строит альтернативный контент и вызывает функцию swfobject.embedSWF. Альтернативный контент создается с помощью готовой функции, например, следующей.

Когда функция setupAlternateContent называется ошибкой, возникает ошибка ('#' + containerID).

embedSWF: function(flashFilename, containerID, width, height, minFlashVersion, flashvars, params, attributes) { 
    //If the flashvars, params, or attributes variables were passed in and are objects, then save them, otherwise they will be empty. 
    settings.flashvars = (flashvars && typeof(flashvars) == 'object') ? flashvars : {}; 
    settings.params = (params && typeof(params) == 'object') ? params : {}; 
    settings.attributes = (attributes && typeof(attributes) == 'object') ? attributes : {}; 

    //Setup the alternate content that will be used if the user does not have flash installed 
    $(document).ready(function() { setupAlternateContent(containerID); }); 

    //Call the embedSWF function which is found in the swfobject core file 
    swfobject.embedSWF(flashFilename, containerID, width, height, minFlashVersion, flashUpdater, settings.flashvars, settings.params, settings.attributes); 
} 

function setupAlternateContent(containerID) { 
    //Create the innerContainer div element 
    var innerContainer = $.create('div', { 
    }).appendTo('#' + containerID).css({ 
     font: '18px Arial, Verdana, sans-serif', 
     height: '130px', 
     width: '240px', 
     paddingTop: '35px', 
     margin: '0px auto' 
    }); 

    //Put the flash image inside the innerContainer 
    $.create('img', { 
     src: SWFOBJECT_FOLDER_LOCATION + 'flash_icon.png', 
     alt: 'Install Flash' 
    }).appendTo(innerContainer).css({cursor: 'pointer'}).click(function() { window.location = 'http://get.adobe.com/flashplayer'; }); 

    //Add a message bellow the flash icon 
    $.create('p', {}, 'Install Adobe Flash Player').appendTo(innerContainer); 
} 

IE не нравится («#» + containerID) аргумент, который не имеет никакого смысла, потому что я делал это раньше без проблем. Кроме того, я использую расширение JQuery DOMEC, из которого возникает $ .create.

Любая помощь приветствуется. Благодаря!

Метрополис

Answer 1

Возможно, вы захотите пересмотреть свой подход. Если вам нужно отобразить альтернативный контент, созданный JS, когда Flash Player недоступен, я предлагаю сделать swfobject.hasFlashPlayerVersion("9") проверку до, пытаясь создать контент alt. Эта проверка может быть выполнена до загрузки DOM.

Обратите внимание, что swfobject.embedSWF завернуто в свое собственное событие стиля domready, и поэтому его не нужно обертывать в событие jQuery $ (document) .ready.

Простой пример:

var hasFlash = swfobject.hasFlashPlayerVersion("9"); 
if(hasFlash){ 
    swfobject.embedSWF(...); 
} else { 
    //Create alt content right away (no need to wait for dom to load) 
    var altcontent = setupAlternateContent(); 
    //When DOM is ready, append alt content to page 
    $(document).ready(function() { altcontent.appendTo("mycontainer") }); 
} 

Этот подход не ускоряет вещи (не сидят сложа руки, ожидая DOM, чтобы загрузить только, чтобы выяснить, что должно быть сделано), а также предотвращает содержание альта от генерируются если он не требуется.

Следуя этой логике, я бы реорганизовать код что-то вроде этого (пожалуйста, простите опечаток):

embedSWF: function(flashFilename, containerID, width, height, minFlashVersion, flashvars, params, attributes) { 

    if(swfobject.hasFlashPlayerVersion(minFlashVersion)){ 

     //If the flashvars, params, or attributes variables were passed in and are objects, then save them, otherwise they will be empty. 
     settings.flashvars = (flashvars && typeof(flashvars) == 'object') ? flashvars : {}; 
     settings.params = (params && typeof(params) == 'object') ? params : {}; 
     settings.attributes = (attributes && typeof(attributes) == 'object') ? attributes : {}; 

     //Call the embedSWF function which is found in the swfobject core file 
     swfobject.embedSWF(flashFilename, containerID, width, height, minFlashVersion, flashUpdater, settings.flashvars, settings.params, settings.attributes); 

    } else { 

     //Create alt content right away (no need to wait for dom to load) 
     var altcontent = setupAlternateContent(); 

     //When DOM is ready, append alt content to page 
     $(document).ready(function() { altContent.appendTo(containerID); }); 

    } 

    function setupAlternateContent(containerID) { 

     //Create the innerContainer div element 
     var innerContainer = $.create('div').css({ 
      font: '18px Arial, Verdana, sans-serif', 
      height: '130px', 
      width: '240px', 
      paddingTop: '35px', 
      margin: '0px auto' 
     }); 

     //Put the flash image inside the innerContainer 
     $.create('img', { 
      src: SWFOBJECT_FOLDER_LOCATION + 'flash_icon.png', 
      alt: 'Install Flash' 
     }).appendTo(innerContainer).css({cursor: 'pointer'}).click(function() { window.location = 'http://get.adobe.com/flashplayer'; }); 

     //Add a message bellow the flash icon 
     $.create('p', {}, 'Install Adobe Flash Player').appendTo(innerContainer); 

     return innerContainer; 

    } 

Answer 2

Похоже, в документе готовый обработчик, которому вы звоните setupAlternateContent с переменной с именем containerID - это переменная всегда определяется где-нибудь? Если нет, то внутри функции вы будете делать appendTo('#'), и я не удивлюсь, если это вызвало ошибку. Каков идентификатор контейнера и где он установлен до готовности документа?

Вы можете попробовать alert(containerId) внутри setupAlternateContent, чтобы увидеть, что вы передаете то, что вы думаете, функции ...

---

(Редактирование после добавлена ​​новая информация)

Я не Известно, что метод $ .create делает, но если вы можете попробовать использовать jQuerys встроенные в создании DOM: var innerContainer = $('<div />').appendTo(.... Или:

var innerContainer = $('<div />').css({ 
    font: '18px Arial, Verdana, sans-serif', 
    height: '130px', 
    width: '240px', 
    paddingTop: '35px', 
    margin: '0px auto' 
}); 
$('#' + containerID).append(innerContainer); 

Или даже все сразу:

$('#' + containerID).append(
    $('<div />').css({ 
     font: '18px Arial, Verdana, sans-serif', 
     height: '130px', 
     width: '240px', 
     paddingTop: '35px', 
     margin: '0px auto' 
    }), 
    $('<img />').attr({ 
     src: SWFOBJECT_FOLDER_LOCATION + 'flash_icon.png', 
     alt: 'Install Flash' 
    }).css({ 
     cursor: 'pointer' 
    }).click(
     function() { 
      window.location = 'http://get.adobe.com/flashplayer'; 
     } 
    ) 
); 

Answer 3

Я получил ту же ошибку только в IE, а не в любом другом браузере. Я заменил .html() на .replaceWith(), и он сработал. При использовании .replaceWith, он заменяет весь DIV. Поэтому в содержимом, который вы заменяете, добавьте div еще раз, чтобы вы не потеряли его.

пример: если вы пытаетесь сделать что-то подобное.

$(#testDIV).replaceWith(testData); 

затем убедитесь, что 'testData' имеет такой формат.

<div id='testDiv'> 
This is new content. 
</div> 

Таким образом, даже если вы используете replaceWith, вы не потеряете DIV.