Страница не вызывает функции Jquery после загрузки содержимого страницы()

Question

У меня есть эта страница с вкладками. Содержимое в say, вкладка 1 загружается как содержимое по умолчанию. когда я нажимаю на вкладку 1, он загружает контент следующим образом:

$('.options').load('index.php?viewfile='+filee+' .optionsPane', function(data) { 
     //inside here i initialized tinymce because the page has tinymce contents. 
} 

и на этой вкладке 1 есть форма. У меня есть ссылка на страницу js, содержащую все функции. и там у меня этот код.

$(document).ready(function(){ 
     $('.bottommernuform').submit(function() { 
     var idval = $(this).attr('id').toString(); 
     var idvalarr = idval.split("-"); 
     var region_name= idvalarr[idvalarr.length-1]; 
     var publish = $('#regionstate-'+region_name).val(); 
     var swap = $('#swapregion-'+region_name).val(); 
     var page_url = $('#page-'+region_name).val(); 
     $.post("index.php", { publish:publish , swap:swap, region_name:region_name}, 
          function(data) { 
           //alert(data); 

         }); 

return false; 
}); 

это прекрасно работает, когда я нажимаю кнопку отправки форм после полной загрузки страницы. Но если я нажимаю на вкладку 1, которая загружает контент из load() $('.bottommernuform').submit() не получает вызов .. он обновляет всю страницу. Еще больше после нажатия на вкладке 1, когда я пытался сохранить содержимое в tinymce, это также дает мне ошибку. Как я могу это исправить. Пожалуйста, дайте мне решение. Помогите оценить! });

Answer 1

Здесь есть две возможные проблемы. Во-первых, загрузка содержимого с .load() не приведет к запуску $(document).ready(), поэтому ни один из ваших кодов в $(document).ready() не будет запущен после загрузки нового кода.

Во-вторых, при использовании статического обработки событий, как:

$('.bottommernuform').submit(fn) 

Этот обработчик события будет только в эксплуатации '.bottommernuform' объектов, которые существовали в то время, когда обработчик событий был первым установлен. Это означает, что он не будет работать для контента, который загружается в будущем.

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

$(staticParentSelector).on('submit', '.bottommernuform', fn); 

Селектор в этом объекте JQuery должен быть статический родительский объект динамически загружаемых объектов .bottommernuform (например, что-то, что существует во время выполнения вашего кода document.ready() и является родительским для всех объектов .bottommernuform). Для достижения максимальной производительности он должен быть максимально приближенным к цели, который не динамически загружается.

Кроме того, помните, что для предотвращения поведения по умолчанию действия отправки вам необходимо отправить return(false) из обработчика событий отправки.

Примечание: в jQuery в v1.7 добавлен .on(). Для версий до версии v1.7 вы можете использовать .delegate(), который работает аналогично, но имеет аргументы в другом порядке.