Запуск страницы сценариев Мастер на импортируемые страницы линий

Question

Я импортировать некоторые PHP в сНу блок, используя ссылку, как этот

<a class="ajax-link" href="login.php">Login/Register</a>

и такой сценарий (который использует JQuery нагрузки, чтобы заполнить блок DIV).

$(function() { 
    $("a.ajax-link").on("click", function(e) { 
     e.preventDefault(); 
     $("#body-element").load(this.href); 
    }); 
}); 

Теперь, скажем, загруженный файл PHP после запуска часть PHP также содержит ссылку с «Ajax-ссылки» класса, и я хочу, чтобы ссылка тоже изменить содержимое этого сНу блока

<?php 
... 
?> 
<a class="ajax-link" href="view.php">View content</a> 

Но вместо того, чтобы запускать вышеупомянутую функцию на нем, он, кажется, полностью игнорирует его и вместо этого открывает новую страницу.

Итак, в основном ... как я могу запустить этот скрипт на импортированных частях страницы?

Answer 1

Это где событие делегации пригождается.

$(document.body).on("click", "a.ajax-link", function(e) { 
    // ... 
}); 

Answer 2

Этот код необходимо перезапустить ... динамически добавленные объекты не включены в предыдущие клики.

$("a.ajax-link").on("click", function(e) { 
    e.preventDefault(); 
    $("#body-element").load(this.href); 
}); 

... вы также можете отключить старого наблюдателя.

$("a.ajax-link").off("click"); 

UPDATE:

Try ...

$("a.ajax-link") 
    .off("click") 
    .on("click", function(e) { 
    e.preventDefault(); 
    $("#body-element").load(this.href); 
}); 

Answer 3

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

Попробуйте это:

// We still use on doc ready to be sure the 
// first link is present before applying listener 
$(function() 
{ 
    // Reset all listeners on ajax-links and 
    // then apply listeners via function 
    resetAjaxLinks(); 
}); 

// This function will remove any ajaxlink 
// listeners and then apply them correctly 
function resetAjaxLinks() 
{ 
    // Remove event listeners and then on click.... 
    $("a.ajax-link").off('click').on("click", function(e) 
    { 
     // Prevent default link action... 
     e.preventDefault(); 

     // Load in your content... 
     $("#body-element").load(this.href); 

     // Once content is loaded in, reset event listeners! 
     resetAjaxLinks(); 
    }); 
} 

EDIT: Это не самый лучший способ для этого. Вместо этого используйте делегирование событий, как указано this answer.