JQuery Родительский/дочерний Ajax load

Question

На странице Parent.htm содержится div, который загружает Child.htm через запрос ajax.

Parent.htm включает сценарий

<script type="text/javascript" src="myinput.js" />"></script> 

The myinput.js включает в себя виджет, имена которых myInput. В конце виджета он имеет функцию, которая добавить этот виджет на некоторые входы следующим образом:

(function($) { 
$.fn.myInput= function(options) { 
..................... 
.................... 

$(document).ready(function() { 
    alert('Function called'); 
    $("input[lang='fa']").myInput(); 
}); 

child.htm очень просто:

<input name="test" lang="fa"> 

child.html не включает сценарий в нем.

Когда я запускаю parent.htm, загружается файл child.htm, и появляется предупреждающее сообщение, но виджет не применяется.

Когда я добавляю строку ниже к child.html, виджет работает.

$(document).ready(function() { 
    $("input[lang='fa']").myInput(); 
}); 

Это показывает, что готовый документ jQuery не применяется к child.html! Если это правда, почему окно предупреждения работает правильно, всплывает!

Answer 1

Предупреждающее сообщение показывает, что оно не зависит от динамически загружаемого содержимого (child.html). Оповещение показывает, как только документ будет готов, независимо от любых других событий:

$(document).ready(function() { 
    alert('Function called'); 
    // other code 
}); 

Причина плагин не применяется, потому что даже если документ (parent.html) готов, динамический контент hasn «т загружен еще:

$(document).ready(function() { 
    // other code 
    $("input[lang='fa']").myInput(); 
}); 

код не ждет AJAX звонков для загрузки другого контента, документ„готов“, прежде чем эти звонки сделаны и, конечно, до того, как ответы на эти вызовы принимаются. Таким образом, в то время, что код работает, этот селектор не находит элементы вы загружаете динамически:

$("input[lang='fa']") 

В то время как вы можете уйти с отсроченной обязательными событиями, чтобы обойти эту проблему, с помощью плагинов, которые не потому что контент должен присутствовать в DOM для работы плагина. Итак, что вам нужно сделать, это инициализировать плагин второй раз на элементах, загружаемых через AJAX, когда этот вызов AJAX преуспевает. Например:

$("#someDiv").load("child.html", function() { 
    $("#someDiv input[lang='fa']").myInput(); 
}); 

Хотя код, который вы уже должны инициализировать плагин для любых соответствующих элементов в parent.html, этот код будет вызываться один раз child.html был загружен и инициализировать модуль для любых ссылок элементов специально в этом динамически загруженном контенте.