javascript - 在 DOM 中之前将 jQuery on 'click' 函数分配给 ajax 生成的列表元素

Question

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

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

我猜我最终将不得不运行另一个 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 中的相关元素

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