jquery .load не применяет готовую функцию

Question

В готовом документе я запускаю этот код:

 jQuery(document).ready(function(){  
        jQuery('#button').click(function() {
            jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
            return false;
        });
    });

Тогда, если я создам форму, подобную

<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />

      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />

      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />

        <br />
      <input type="submit" name="submit" class="button" id="button" value="Send" />
    </fieldset>
  </form>
</div>

Все отлично работает. Однако, если я имитирую поведение, которое я хочу в реальном приложении (форма загружается динамически после того, как document.ready уже был выполнен. Действие jquery #button не вызывается, и форма действует так, как будто нет javascript и просто выполняется сообщение.

jQuery('#contact_form').load("/dynamicform.php");

Нужно ли что-то сделать для .load (), чтобы к нему была применена функция ready?

Answer 1

Используйте .live() как это:

 jQuery(document).ready(function(){  
    jQuery('#button').live('click', function() {
        jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
        return false;
    });
});

Ваш элемент отсутствует при добавлении обработчика. Во всех случаях нужно прослушивать щелчок ... для этого .live() и прослушивает в корне DOM клик, тогда как .click() ни к чему не привязывается, потому что нет элементов сопоставьте селектор, когда вы звоните. live() прослушивает клики по соответствующим элементам позже.

Answer 2

Событие .ready вызывается, когда DOM готов к использованию, и поэтому оно не будет вызываться при динамической загрузке и вставке чего-либо в уже существующий DOM.

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

jQuery("#contact_form form").submit(function (event) {
    event.preventDefault();
    // Do your stuff...
})

(event.preventDefault (): http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29)

Answer 3

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