Почему jQuery не влияет на контент, сгенерированный после вызова Ajax - PullRequest
Новая
       21

Почему jQuery не влияет на контент, сгенерированный после вызова Ajax

2 голосов
/ 28 октября 2010

Я пытаюсь скрыть все li в div, который генерируется динамически, когда пользователь нажимает кнопку. Содержимое div извлекается через вызов Ajax, и я затем назначаю div на странице.

По какой-то причине любая попытка изменить стиль с помощью jQuery не имеет никакого эффекта. Я заметил, что я также должен применить $(selector).live('click, callback) при попытке вызвать клик. 

$.ajax({
 url: "admin.php",
 cache: false,
 data: ({
  'module':'data',
  'action':'actionName',
  'clientname':formatted
 }),
 success: function(data) {
  $('#outputDiv').html(data);
 },
 error: function(XMLHttpRequest, textStatus, errorThrown) {
  if(textStatus == "error") {
   $('#outputDiv').append("Sorry, but there was an error");
  }
 }
});

The 'data' variable returned to the success method is a nested list set e.g. <ul id='tree'><il><a></a></li></ul> etc

What I'm trying to do after the load is hide all children in this case I'd call $(' #tree > li').hide(); A trigger will then occur when the use clicks the anchor tag with:

$('a.viewdetails').click(function() {
$(this).next('ul').toggle();
});

Редактировать 1

Итак, теперь я реализовал решение, упомянутое ниже, но я не могу заставить загрузку работать правильно, похоже, что она не отправляет параметры url, отформатированный выше и может состоять из пробелов и т. Д. 

var containerDiv = $('div#clientBusinessUnits'),
    liClickHandler = function(e) {
        $('a.viewdetails').click(function() {
            alert('1');
        });
    },
    loadCompleteHandler = function(responseText, textStatus, XMLHttpRequest) {
        console.log(responseText);
        console.log(textStatus);
        $('li', containerDiv).click(liClickHandler);
    };
    containerDiv.load("admin.php?module=data&action&getData&clientname="+formatted, loadCompleteHandler);

Ответы [ 2 ]

3 голосов
/ 28 октября 2010

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

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

Таким образом, не зная вашего фактического кода, решением вашей проблемы будет либо

  1. Следовательно, используйте .live () для привязки событий (может повлечь за собой проблемы с производительностью на глубоко вложенных страницах),
  2. Привязать обработчики событий после , когда вы создали свои элементы динамически (т.е.связать обработчики в функции обратного вызова вашего метода ajax).

Пример грубого наброска: 

var
  $containerDiv = $('div#container'),
  liClickHandler =
    function(e)
    {
      // hide your li element, or whatever you want to do on click events
    },
  loadCompleteHandler =
    function(responseText, textStatus, XMLHttpRequest)
    {
      $('li', $containerDiv).click(liClickHandler);
    };

$containerDiv
  .load(
    urlToPhpScript,
    loadCompleteHandler
  );
1 голос
/ 28 октября 2010

Это потому, что код запускается только один раз после загрузки скрипта. Если вы меняете html через вызов ajax, вам нужно перезапустить код, чтобы скрыть li s. Для этого вы можете поместить код в функцию и вызвать эту функцию после загрузки сайта и после обновления сайта, вы можете сделать это, если вы вызываете эту функцию из функции обратного вызова вызова ajax.

...