为什么 jQuery 不影响 Ajax 调用后生成的内容

Question

我试图隐藏 div 中的所有 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);

Answer 1

任何绑定到特定元素的事件处理程序（在元素存在于页面上之前）都将不起作用。

.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
  );

Answer 2

这是因为代码仅在脚本加载后运行一次。如果您通过 ajax 调用更改 html，则需要重新运行代码以隐藏 li。要实现此目的，您可以将代码放入一个函数中，并在站点加载后调用此函数，并且在站点更新后，如果您从 ajax 调用的回调函数中调用此函数，则可以执行此操作。