2011-01-10 6 views
0

В моем приложении я использую более чем html-страницу для отображения содержимого, а каждая страница имеет собственный .js-файл. Когда я вызываю html-страницу, тогда также включается файл .js. В .js, я использую $('div').live('pageshow',function(){}). Я вызываю html-файл из. js(using $.mobile.changePage("htmlpage")).jquerymobile - включить .js и .html

Моя проблема: рассмотрим, у меня есть два html-файла. Файл second.html вызывается с именем one.js. когда я показываю second.html, то время one.js снова перезагружается. Я получаю предупреждение "one.js", затем "second.js"

one.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" /> 
    <script src="jquery-1.4.3.min.js"></script> 
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script> 
    </head> 
    <body>   
    <div data-role="page"> 
    </div> 
    </body> 
</html> 

Second.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" /> 
    <script src="../jquery-1.4.3.min.js"></script> 
    <script src="../jquery.mobile-1.0a2.min.js"></script> 
    <script type="text/javascript" src="Scripts/second.js"></script> 
    </head> 
    <body> 
    <div data-role="page"> 
     <div data-role="button" id="link" >Second</div> 
    </div><!-- /page --> 
    </body> 
</html> 

one.js

$('div').live('pageshow',function() 
{  
    alert("one.js"); 
    //AJAX Calling 
    //success result than call the second.html 
    $.mobile.changePage("second.html");     
}); 

second.js

$('div').live('pageshow',function(){ 
{  
    alert('second.js'); 
    //AJAX Calling 
    //success result than call the second.html 
    $.mobile.changePage("third.html");     
}); 

Примечание: Когда я показываю forth.html это время следующие файлы перезарядка (one.js, second.js, третий, JS и fourth.js. Но мне нужен только четвертый.). Я попытался использовать $ .document.ready (function() {}); но в то время .js не звонил.

+0

Вы должны опубликовать некоторые кода, чтобы помочь прояснить, что вы просите , – jmort253

+0

Привет ..Я отправил с образцом кода. Пожалуйста, помогите мне. – Finder

+0

Когда вы показываете second.html, вы полностью перезагружаете страницу или используете Ajax для ее загрузки? – jmort253

ответ

1

Событие pageshow связывает функции JavaScript, которые срабатывают при каждом загрузке страницы. Когда вы загружаете вторую страницу, вы создаете другую функцию просмотра страниц, которую вам фактически не нужно создавать.

Это должно помочь решить вашу проблему, если и только если вы определяете этот раз:

$('div').live('pageshow',function(event, ui){ 
    alert('This page was just hidden: '+ ui.prevPage); 
}); 

$('div').live('pagehide',function(event, ui){ 
    alert('This page was just shown: '+ ui.nextPage); 
}); 

При переходе страниц, это предупредит вас, что страница была только что показали, и что страница была просто скрыта.

Большой ресурс:
http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

http://forum.jquery.com/topic/mobile-events-documentation

+0

Привет, я очень новичок в этом. Я учусь бок о бок. Не могли бы вы помочь мне, как это сделать? – Finder

+0

@Girija - Смотрите мои правки. – jmort253

+0

Я вызываю $ ('div [data-role = "page"]'). Unbind(); перед перемещением второй страницы. Но все же это призвание. $ ('div'). live ('pageshow', function() { alert ("one.js"); // AJAX Вызов // результат успеха, чем вызов second.html $ ('div [ data-role = "page"] '). unbind (' pageshow '); $ .mobile.changePage ("second.html"); }); Чанч заранее – Finder

1

Отредактировано на Oers комментарий (К сожалению, SO новичку здесь):

Вот альтернативный подход к загрузке JS файлов на основе текущей HTML страницы

Имейте один файл сценария, который включен на каждую страницу вашего приложения, но действует как не что иное, как файл «bootstrapper» e, который обнаруживает текущую страницу, а затем вставляет файлы (файлы) JavaScript в DOM.

Эта функция вставит Javascript:

function insertScript(script, container) { 
    var elem = document.createElement('script'); 
    elem.type = 'text/javascript'; 
    elem.src = 'Assets/Scripts/' + script + '.js'; 
    container.appendChild(elem); 
} 

И этот код определяет текущую страницу

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed. 
// See: https://gist.github.com/1336327 for some other page events 
$(document).bind('pagechange', function(event){ 

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page" 
    var pages = $('div[data-role="page"]'), 
    // the current page is always the last div in the Array, so we store it in a variable 
    currentPage = pages[pages.length-1], 
    // grab the url of the page the was loaded from (e.g. what page have we just ajax'ed into view) 
    attr = currentPage.getAttribute('data-url'); 

// basic conditional checks for the url we're expecting 
if (attr.indexOf('home.html') !== -1) { 
    // now we know what page we're on we can insert the required scripts. 
    // In this case i'm inserting a 'script.js' file. 
    // I do this by passing through the name of the file and the 'currentPage' variable 
    insertScript('search', currentPage); 
} 

// rinse and repeat... 
if (attr.indexOf('profile.html') !== -1) { 
    insertScript('profile', currentPage); 
} 

}); 

Reference Link

+1

Добро пожаловать в переполнение стека! Хотя это теоретически может ответить на вопрос, [было бы предпочтительнее] (http://meta.stackexchange.com/q/8259) включить основные части ответа здесь и предоставить ссылку для справки. – oers

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