2014-01-27 4 views
0

Я пытаюсь создать div для обработки некоторых изображений, но я не хочу добавлять его в раздел тела.Создание div с jquery на лету

Я хочу использовать файл js, который будет содержать мой код, поэтому я могу загрузить его на боковой панели wordpress. Кроме того, мои проверки кода, если JQuery загружен и если это не будет загружать его и запустить код

Мой код:

function myJQueryCode() { 
    //Do stuff with jQuery 
$(document).ready(function(){ 

$("body").append('<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>'); 
//I don't want append it to body just to create it so it can holds the div bellow! 

$('<div class="items" id="link_'+tsource1id+'" style="width:110px; height:100px; float:left; margin:20px; background-color:#333;"></div>').html('<a href="'+tsource1+'"><img src="'+tsource1img+'" width="600" height="350" alt="xxx" style="width:104px; height:94px; float:left; margin-left:3px; margin-top:3px;" width="104" height="94"></a>').appendTo('#theContentsm'); 

$('<div class="brief_'+tsource1id+'" style="width:110px; height:100px; float:left; margin-top:3px; padding-bottom:3px; text-align:center;"></div>').html(tsource1caption).appendTo('#link_'+tsource1id); 

}); 
} 

//Checking if jquery is loaded.. 
if(typeof jQuery=='undefined') { 
    var headTag = document.getElementsByTagName("head")[0]; 
    var jqTag = document.createElement('script'); 
    jqTag.type = 'text/javascript'; 
    jqTag.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'; 
    jqTag.onload = myJQueryCode; 
    headTag.appendChild(jqTag); 
} else { 
    myJQueryCode(); 
} 

И я загрузит это так:

<script type="text/javascript" src="http://www.mydomain.com/scripts/myjavascript.js"></script> 
+0

И каковы сообщения о симптомах/консолях, если они есть? – mplungjan

+0

Можете ли вы создать div и добавить его в тело? –

+0

@mplungjan, когда я использую код для загрузки js-файла, который содержит код, ничего появляется. Должен ли я использовать noConflict для jquery? –

ответ

1

Возможно, вы имели в виду

function myJQueryCode() { 
    $(function(){ 
    $('<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>') 
    .append('<div class="items" id="link_'+tsource1id+'" style="width:110px; height:100px; float:left; margin:20px; background-color:#333;"></div>').html('<a href="'+tsource1+'"><img src="'+tsource1img+'" width="600" height="350" alt="xxx" style="width:104px; height:94px; float:left; margin-left:3px; margin-top:3px;" width="104" height="94"></a>') 

    $('<div class="brief_'+tsource1id+'" style="width:110px; height:100px; float:left; margin-top:3px; padding-bottom:3px; text-align:center;"></div>').html(tsource1caption).appendTo('#link_'+tsource1id); 

    }); 
} 

и не все браузеры поддерживают OnLoad для сценария

'onload' handler for 'script' tag in internet explorer

+0

У меня эта ошибка в моей консоли Неподготовлено ReferenceError: $ не определено –

+0

Мой код работает, когда я включаю его в локальный html-файл ... есть ли любая проблема, что у меня есть .js файл в другом домене/сервере? –

0

Я решаемые его .. я удалил строку

$("body").append('<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>'); 

И я создать руководство в DIV

<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div> 

и вставив ниже него мой JavaScript!

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