jquery - 为什么 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

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

.live() 方法对此有所帮助，因为它可以让您提前将事件处理程序绑定(bind)到动态插入元素后与选择器匹配的元素。

因此，在不知道您的实际代码的情况下，解决您问题的方法是:

1. 因此，请使用 .live() 进行事件绑定(bind)(可能意味着深层嵌套页面上存在性能问题)，
2. 动态创建元素后绑定(bind)事件处理程序(即在 ajax 方法的回调函数中绑定(bind)处理程序)。

粗略的示例:

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