Обновленный div не может получить доступ к внешнему файлу javascript

Question

Я использую JavaScript/jQuery для загрузки страницы в div.

Моя проблема в том, что я хочу, чтобы некоторые функции работали на этой загруженной странице. Если я добавлю те функции, которые мне нужны, в тег скрипта вместе с HTML, то он отлично работает, но это выглядит беспорядочно, и мне было интересно, есть ли какой-либо другой способ, которым я мог бы работать из прикрепленного файла JavaScript?

Редактировать: Я лучше объясню, что я имею в виду.

Я приложил скрипт в моем заголовке, как так

<script src="custom.js" defer="defer"></script> 

в этом сценарии у меня есть функция:

$(document).ready(function() { 
$('a#view-users').click(function() { 

    $('#main-view').load('view_users.php'); 

    } 
    ); 

}); 

Теперь в DIV (# главного ракурса) он загружает view_users. PHP. В view_users.php мне нужно выполнить ajax-поиск, поэтому я добавил еще одну функцию в свой файл custom.js. Проблема в том, что все, что находится в div # main-view больше не может использовать то, что находится в моем файле custom.js. Я хочу знать, могу ли я решить эту проблему, добавив скрипт в заголовок, вместо того, чтобы добавлять его в файл view_users.php, который очень грязный.

Answer 1

Я думаю, вам нужно позвонить getScriptjquery function в вашем load обратного вызова что-то вроде этой надежды, чтобы решить вашу проблему:

$('#result').load('ajax/test.html', function() { 
     $.getScript("ajax/test.js"); 
}); 

есть другое решение использовать JQuery deferred promise.

Answer 2

Не могли бы вы быть более конкретными (то есть: образцы кода). Вы имеете в виду, что теги сценария внутри вашей загруженной страницы не работают, а именно:

<script type="text/javascript" src="jscript"></script> 

или что события, которые вы хотите прикрепить к элементам Dom не работают, когда вы загрузите новый HTML в DIV? Если это так, вы должны использовать метод jQuery 'on', поскольку элементы, которые вы добавляете на страницу, не будут прослушивать события, для которых вы ранее были прикреплены обработчики. Ниже приведена перегрузка метода jQuery 'on', необходимого для присоединения обработчика к новым элементам, когда вы прикрепляете их к Dom.

$('#myDiv').on('click', '#loadedPageElement', function(e) { 
    alert('clicked'); 
    e.preventDefault(); 
}); 

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

Привет снова,

Атрибут Defer задержит выполнение вашего скрипта, пока не будет загружена начальная страница, я не уверен, что это поведение, которое вы после этого. Затем он настроит обработчик событий ('a # view-users'), который позволит ('view-users.php') загружаться в ('# main-view') при нажатии. Если у вас есть логика, которая должна работать с html, сгенерированной «view-users.php» после ее загрузки, вам нужно будет использовать $ .on(), если требуется привязка события, например:

$(document).ready(function() { 
$('a#view-users').click(function() { 

    $('#main-view').load('view_users.php'); 

}); 

$('#main-view').on('click', '#loadedPageElement', function(e) { 
    alert('clicked'); 
    e.preventDefault(); 
}); 

}); 

or if you just want some code to run then a callback function is sufficient: 

$(document).ready(function() { 
    $('a#view-users').click(function() { 

     $('#main-view').load('view_users.php',function(){ 

      alert('code running after load of "view_users.php"') 

     }); 

    }); 

});

Ни один из них не должен требовать от вас кода, написанного встроенным в загружаемом php.

Привет,

Просто ради ясности («A # вид пользователи») в начальной загрузке страницы или элемента в «view_users.php», который загружается с помощью AJAX?

Привет,

Я думаю, что проблема, которую вы испытываете, как упоминалось мною, и некоторые из других в том, что если у вас есть скрипт в заголовок, который взаимодействует с элементами, которые загружаются в ('# основного ракурса ') через ajax, даже если ваш исходный код использует правильный селектор Jquery, вновь загруженные элементы не будут распознаваться как те же элементы, поэтому вам нужно будет использовать функцию обратного вызова в качестве второго аргумента метода загрузки или использовать 'on'. метод «on» работает со стандартными событиями jQuery, включая «load», т.е. загрузку элемента в dom. например

$("#containerElement").on('load','#newlyLoadedElement',function(e){ 

     //Do some stuff when the element'#newlyLoadedElement' is inserted 
     // into "#containerElement" 
}) 

Answer 3

Здесь»а jsfiddle http://jsfiddle.net/9MfMS/2/ если что ваш пытаются сделать, это загрузить HTML с другой страницы и прикрепить событие обработчика к нему.

//the html that is loaded 
<div id="#clickMe">Click Me</div> 

//attach event handler to it 
$(document).on('click','#clickMe',function(){ 
    alert("Function invoked on html from different page."); 
});