javascript - 将 'click' 函数上的 jQuery 分配给 ajax 生成的列表元素，然后再将它们放入 DOM 中

Question

我正在构建一个 ajax使用 JSON 生成菜单, 创建 <li> for loop 中的元素并在将所有列表项放在页面上之前将每个列表项添加到一个变量。

for loop正在迭代一个数据集，该数据集包含我将基于 li 进行 ajaxing 的下一个 URL被点击的元素。

我猜我最终将不得不运行另一个 for loop如果无法事先设置，则在将列表添加到页面后分配点击事件

另外，即使它有效，我也不想构建我的 getJSON方法进入 html onclick属性，因为这会在 DOM 中公开 JSON 导航 URL。

这是一个工作示例，说明在构建标记时我不做什么。

是否可以将for循环中的点击事件分配给最近创建的<li>在我将它放在页面上之前在我的变量中？

newLinks += (dataSet[i].has_child > 0) ? '<span class="child arrow" onclick="getJSON(' + dataSet[i].nav_url + ',' + childCheck + ')"></span>' : '';

下面是我的标记生成器函数

function buildLists() {
  for (var i = 0; i < dataSet.length; i++) {
    newLinks += '<li ';
    newLinks += 'class="';
    newLinks += (dataSet[i].selected === true ) ? 'selected ' : '';
    newLinks += dataSet[i].display_status + '';
    newLinks += (dataSet[i].has_child > 0) ? ' hasChild' : '';
    newLinks += '"'; // end class attribute
    newLinks += '>';
    newLinks += (dataSet[i].has_child > 0) ? '<span class="child arrow"></span>' : '';
    newLinks += '<a href="' + dataSet[i].url + '"';
    newLinks += 'id="' + dataSet[i].id + '"';
    newLinks += '>';
    newLinks += dataSet[i].name;
    newLinks += '</a>';
    newLinks += '</li>';
    childCheck = (dataSet[i].node_type !== 'childInstance');
    $j(newLinks).on('click', function() {
      getJSON( dataSet[i].nav_url, childCheck );
    })
  }
  newLinks = '<ul>' + newLinks + '</ul>';
  placeContent();
}

placeContent();函数然后添加 newLinks页面变量。这是我假设我可能必须遍历 dataSet 的地方并分配 on click一旦列表项在 DOM 中就起作用。

编辑:我使用了两个答案的组合，这里提供了我更新的代码，它可以根据需要运行:

我现在将一个点击事件分配给包装器并将一个额外的类传递给我的 span元素。这允许我创建独特的点击事件，同时仍在 for 循环中并将它们分配给 DOM 中的 relent 元素

function buildLists() {
  for (var i = 0; i < dataSet.length; i++) {
    newLinks += '<li ';
    newLinks += 'class="';
    newLinks += (dataSet[i].selected === true ) ? 'selected ' : '';
    newLinks += dataSet[i].display_status + '';
    newLinks += (dataSet[i].has_child > 0) ? ' hasChild' : '';
    newLinks += '"'; // end class attribute
    newLinks += '>';
    newLinks += (dataSet[i].has_child > 0) ? '<span class="child arrow ' + dataSet[i].id + '"></span>' : '';
    newLinks += '<a href="' + dataSet[i].url + '"';
    newLinks += 'id="' + dataSet[i].id + '"';
    newLinks += '>';
    newLinks += dataSet[i].name;
    newLinks += '</a>';
    newLinks += '</li>';
    $j('.menu').on('click', '.' + dataSet[i].id , createItem(dataSet[i].nav_url));
  }
  newLinks = '<ul>' + newLinks + '</ul>';
  placeContent();
}

然后我运行 createItem功能。此外，我正在取消绑定(bind)点击 .menu选择器所以 getJSON功能及对应for loop不要持续触发多次点击。

function createItem(url) {
  return function() {
    $j('.menu').unbind('click');
    getJSON( url, true );
  };
}

Answer 1

这是关于关闭的。你只需要在 BuildLists 之外有一个函数，比如

function createItem(url) {
  return function() {
    getJSON( url, childCheck );
  };
}

然后将您的代码更改为

$j(newLinks).on('click', createItem(dataSet[i].nav_url));