Jquery не может получить доступ к исходным объектам jquery из нового div в событии загрузки ajx

Question

У меня есть страница с кучей объектов JQuery. На этой же странице у меня есть форма, в которой вы можете ввести поисковые термины в ряд полей и нажать кнопку поиска, которая затем отправит запрос AJAX на сервер и затем загрузит полученный HTML-код в div. Очень простое приложение Jquery ...

Проблема заключается в следующем. Когда вы нажимаете на ссылку с результатом поиска, которая была загружена в div через ajax, код Jquery на исходной странице не будет запускаться. Например, если я добавляю функцию searchClick () на исходную страницу, то я добавляю onClick = "searchClick ()" к каждому тегу <a>, который загружается в div с помощью ajax, щелкнув по этой ссылке, получим JS ошибка, которая говорит, что searchClick () не определена. Но это определено! Я определил это до вызова AJAX. Я читал о пузырях событий Jquery, но это не похоже на проблему. На самом деле я не уверен, но я попробовал это, и это все еще не работало. вот мой текущий код

на главной странице, которая загружается при загрузке страницы браузером:

<script language="javascript" type="text/javascript">

$ (документ) .ready (function () {

...

    **function searchClick(value)** {
      alert("here");
    }

     $('#search').click(function() {
             description = urlencode($("#description").val());
             manufacturer = urlencode($("#manufacturer").val());
             product = urlencode($("#product").val());
             category = urlencode($("#category").val());
             subcategory = urlencode($("#subcategory").val());

             $(**'#search_results'**).**load**('/productSearch.php?description=' + description + '&product=' + product + '&category=' + category + '&subcategory=' + subcategory')

       });

    ...
    </script>

    <div id="**search_results**"></div>

ниже приведен пример ссылок, которые появляются в div search_results при вызове ajax-запроса (load ())

<a href="#" onclick="s**earchClick("some value")"**>Product 1</a>

Нажатие на эту ссылку в приведенном выше примере приведет к ошибке searchClick () не определена. У кого-нибудь есть предложения? Спасибо!

Answer 1

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

Что касается вашей проблемы, у меня нет объяснений. Попробуйте отслеживать источник HTML, а также структуру DOM, используя такой инструмент, как Firebug.

Answer 2

$("#search").live("click", function()
{
    var description = urlencode($("#description").val());
    var manufacturer = urlencode($("#manufacturer").val());
    var product = urlencode($("#product").val());
    var category = urlencode($("#category").val());
    var subcategory = urlencode($("#subcategory").val());

   $.ajax
   ({
        type: "GET",
        url: "/productSearch.php",
        data: 'description=' + description + '&product=' + product + '&category=' + category +"&subcategory=" + subcategory,
        success: function(result)
        {   
            $("#search_result").html(result);
        }
    });
});

Используйте JQuery Live события, когда новые элементы добавляются, они все равно будут реагировать на события. Не используйте

<a href="#" onclick="s**earchClick("some value")"**>Product 1</a>

его плохая форма.