2012-01-05 1 views
4

У меня есть полностью управляемый веб-сайт, поэтому в последнее время мне пришлось исследовать методы делегирования. Я узнал, что .live и .delegate устарели, а новая функция - .on.jQuery .on функция не похоже на событие «load»

Если я динамически загружаются веб-страницы в дивизию на текущей странице (AJAX), так как:

<html> 
<head> 
<script src="jquery.js"> 
</script> 
<script> 
function ajaxTest() 
{ 
    $('#content').load('test.php'); 
} 
</script> 
<script type="text/javascript"> 
$(function(){ 
    $(document).on("click", "#map", function(){ 
     alert("it has been loaded"); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="content"> 
     <button onClick="ajaxTest()" value="Click Me"> 
      This is to be clicked 
     </button> 
    </div> 
</body> 
</html> 

где test.php выглядит

<html> 
    <head> 
    </head> 
    <body> 
    <div id="map">THIS IS THE MAP</div> 
    </body> 
</html> 

Затем я могу нажать на слова «ЭТО КАРТА», и это действительно показывает предупреждение. Проблема у меня были это вместо того, чтобы делать:

$(document).on("**click**", "#map", function(){ 

мне нужно что-то больше вдоль линий:

$(document).on("**load**", "#map", function(){ 

Это не работает, очевидно, так что если что-то подобное мне интересно мог бы. Вся причина, по которой я даже спрашиваю об этом, заключается в том, что на некоторых страницах вместо того, чтобы просто «ЭТО МАКА» в подразделении карты, у меня есть карта google или swf-объект или что-то еще. Любая помощь будет оценена по достоинству.

Если вы хотите, чтобы просто ответить, как загрузить карту Google в подразделение, которое еще не существует, это было бы полезно тоже;)

+0

сделал вас try .bind ("click", "testfunc"); –

ответ

5

только некоторые события пузыриться родительскую цепь и может быть использовано на родительских объектов с .on() или .live() или .delegate(). .load() не является одним из тех событий, которые пузырятся.

Это частичный список событий, которые пузырятся из документа jQuery: нажмите, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover и mouseup.

От doc page for .on(), вот цитата:

Во всех браузерах, событие загрузки не пузырь.

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

$("#map").on("load", function(){}); 

или

$("#map").load(function(){}); 

При привязке непосредственно к объекту, как это, не барботажного и он будет работать с событием загрузки. Объект #map должен существовать в момент привязки обработчика события, поскольку этот метод использования .on() или .load() не может работать с объектами, которые будут созданы в будущем. Обработчик события должен быть привязан к объекту после создания объекта.

+0

Какой код мы можем использовать, если объект еще не создан? (Я думаю, что это был вопрос). – lijn

+0

@lijn - как говорится в моем ответе, событие 'load' не доходит до родителей, поэтому вы не можете привязать его к чему-либо до того, как будет создан целевой объект. Вы должны привязать его к фактическому объекту ПОСЛЕ создания этого объекта. – jfriend00

+0

thx! так кажется, жаль, что это невозможно – lijn

1

, если вы хотите сделать что-то, когда response является loaded вы можете использовать callbackfunction нагрузки вместо того, чтобы делать это в два отдельных сценария и события связывания, что-то вроде

$('#content').load('test.php', function(){ 
alert("map is loaoded.") 
}); 

reference

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