Событие JQuery, когда div обновляется

Question

прямо сейчас, я использую jQUery(document).ready для «введения» javascript в div.

Все отлично - но проблема в том - что же ДИВ в настоящее время обновляется с помощью AJAX - и JS в этом случае не является «повторно введен» ..

(если кому-то интересно - ДИВ на самом деле является «виджет в WordPress„виджетов администратора“область)

Моя проблема заключается в том, что jQuery(document).ready явно не работает (DOM уже„готов“), и когда я попытался jQuery('#divname').ready - я не мог заставить его работать.

Я даже попробовал .ajaxComplete(), но безрезультатно ...

Я не уверен, если это общая проблема метода или конкретной WP проблема виджетов ..

EDIT Я - по многочисленным просьбам: мой сценарий :-)

//php wrapper function here ... 

// .. php stuff. 

    return " 

    <script type='text/javascript'> 
var map; 
var markersArray = []; // to be used later to clea overlay array 
jQuery(document).ready(function() { 
    var lat = ". $lattxt . " ; // .. php variable. 
    var lon = ". $lontxt . " ; // .. php variable. 
    var marker; 
    // ...continue boring google map code 
    }; 
    map = new google.maps.Map(jQuery('#DivName')[0], myOptions); 
    // ...tinue boring google map code 

    function placeMarker(location) { 
     ///...continue boring google map code 
     } 
    } 

});</script> 
    <div id='DivName' style='height:200px; width:100%;' ></div><br /> 
    "; 

, что я являюсь на самом деле это создание DIV и запуск карты google. Проблема заключается в том, что этот «виджет» (или «div») «сохраняется» через AJAX для параметров и обновляется - Javascript не работает (он вводится в код, но не «инициирует ..)

Как я уже говорил, этот метод отлично работает на «первом» ходу - но если div обновляется - он больше не работает, даже если div есть и javascript тоже есть ...

EDIT 1:

Я нашел следующие ссылки, которые могут или не могут помочь любому с подобными проблемами:

краткое описание проблемы с возможным решением: http://www.johngadbois.com/adding-your-own-callbacks-to-wordpress-ajax-requests/

два взаимосвязанных вопроса:

markItUp for Wordpress widget

jQuery Functions need to run again after ajax is complete

Это сказанное - я еще не был в состоянии решить мою конкретную проблему , если я напишу полный ответ.

Answer 1

Я считаю, вы хотите, чтобы события мутации DOM. Эти огни при каждом изменении DOM.

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

В частности, DOMSubtreeModified, однако поддержка браузера ограничено.

Существует плагин JQuery, который может помочь:

https://github.com/jollytoad/jquery.mutation-events

Однако, более подробно о том, что вы на самом деле пытаетесь достичь может помочь. Возможно, есть более простой способ сделать то, что вы хотите.

Edit:

Если теперь я понимаю (и это еще не совсем ясно), вы впрыскиванием этого JavaScript в вашем DIV, но это не работает, потому что код ждет jQuery(document).ready().

Если это так, то вы должны быть в состоянии либо:

1. Избавиться от jQuery(document).ready() обертки, и ваш код будет работать, как только он загружает, но может вызвать проблемы на начальной загрузке ,

2. переформатирования кода, так что вы можете позвонить функции после загрузки AJAX:

 

var map; 
var markersArray = []; // to be used later to clea overlay array 

function doMap() { 
    var lat = ". $lattxt . " ; // .. php variable. 
    var lon = ". $lontxt . " ; // .. php variable. 
    var marker; 
    // ...continue boring google map code 
    }; 
    map = new google.maps.Map(jQuery('#DivName')[0], myOptions); 
    // ...tinue boring google map code 

    function placeMarker(location) { 
     ///...continue boring google map code 
     } 
    } 

}; 

jQuery(document).ready(function() { 
    doMap(); 
}); 

</script> 

Затем вызовите doMap() после перезагрузки. Конечно, это еще раз.

Answer 2

Я не уверен в обратном вызове WP, который вы можете использовать, но простой способ jQuery для обработки этих типов ситуаций - делегировать обработку событий ближайшему содержащему HTML элементу, который никогда не обновляется.

Там раньше «.delegate()», но в последних версиях вы можете использовать:

$('#nearest-stable-container').on("click", ".widget", function(){...}); 

Поскольку обработчик присоединен к чему-то, что никогда не выходит из DOM, это сохраняется через изменения в».widget ».

Answer 3

У меня была одна и та же проблема (в WordPress), и я решил поделиться своим ответом для всех, кто может это понять.

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

$(document).ajaxComplete(function() { /* do code here */ }); 

Это вызовет после нажатия на кнопку сохранения. Надеюсь, это поможет кому-то!