Question

我正在尝试隐藏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（）方法有助于实现这一点，因为它可以让事件处理程序提前绑定到动态插入元素后与选择器匹配的元素。

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

因此使用.live（）进行事件绑定（可能意味着深层嵌套页面上的性能问题），
在动态创建元素之后绑定事件处理程序（即在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调用的回调函数中调用此函数，则可以执行此操作。

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

2 个答案: