Блог

Я использую .load() для переноса текста с одной страницы на другую. Один конкретный div, который я «загружаю», имеет модальный, запускаемый якорным классом. Однако этот класс привязки не функционирует после «загрузки». Есть ли какой-либо способ обойти это?

Я опубликовал простой пример здесь: http://temp.kissr.com /

Вы можете видеть, что при нажатии ничего не происходит. Однако это страница, с которой извлекается зеленый прямоугольник и сопровождающее его предупреждение: http://temp.kissr.com/div_being_loaded.html

Просмотрите источник на этих страницах, чтобы проверить мой метод .load() . Мой подход также опубликован здесь:

 <script>
    $(function() {
        $('#grab_div').load('div_being_loaded.html .load');
    }); 
</script>

<div id="grab_div"></div>
  

И это div, который загружается с отдельной страницы (div_being_loaded.html ), но расположенный на том же корневом уровне.

 <div class="load">
    <a class="alert">Click for Alert</a>
</div>

<script>
    $("a.alert").on("click", function() {
        alert( "Success" );
    });
</script>
  

Спасибо, что взглянули!

Привязка события щелчка выполняется до того, как содержимое присутствует внутри DOM. У вас есть 2 решения.

1) Вы можете дождаться загрузки содержимого :

 $(function() {
    $('#grab_div').load('div_being_loaded.html .load', function(){
        $("a.alert").on("click", function() {
            alert( "Success" );
        });
    });
}); 
  

2) или вы можете использовать делегирование событий :

 $("#grab_div").on("click", 'a.alert', function() {
    alert( "Success" );
});
  

Заменить:

 $('#grab_div').load('div_being_loaded.html .load');
  

с помощью

 $('#grab_div').load('div_being_loaded.html');
  

(Или вы разместили весь script блок внутри своего <div class="load"> .)

Добавляя .load класс (from <div class="load"> ), вы загружаете только этот бит HTML, а не script блок.