Question

我正在尝试将ajax-fetched数据添加到使用jquery动态添加到DOM的元素中。元素具有相同的类但ID不同。它们是通过“点击”添加的。事件。有些人建议我如何做到这一点。我现在的问题是，每次单击列表添加元素时，它都会获取与该ID无关的数据。 HTML列表如下所示：

<li id="23" class="options">Item 23</li> 
<li id="24" class="options">Item 24</li>
<li id="25" class="options">Item 25</li>

这是我的js：

var box = '<div class="box" id="{0}"><div class="box-content"></div></div>';
//how to add the box to the DOM
$('li.options').click(function(){
  id = $(this).attr('id');
  $(boxes).append(box.format(id));
  //Fetching data via ajax
  $.ajax({
     type: 'POST',
     url: 'fetch.php',
     dataType: 'json',
     cache: false,
     data: {'id' : id},
     success: function(res){
        $(this).find('box-content').append(res);
     }
  });
});

到目前为止，一切正常。正确添加元素。如果我点击列表23＆＃39;，＆＃39;框ID 23＆＃39;附加。列表24和25也是一样的。（正确地使用相应的ID附加框）。我的问题是在获取数据时。如果我单击列表23，则在框24上正确附加23的数据，但是当我单击列表24时，甚至附加已为列表23提取的数据。（23仍然开放）。所以我最终得到了双倍数据＆＃39;在第二个附加的框中，＆＃39; tripple data＆＃39;对于附加第三个的框...等等。

有任何想法如何解决这个问题？我想把ajax从点击事件中拿出来，但我不知道我可以使用哪个事件来解雇它。但是，我对如何解决这个问题提出任何建议。我好几个月都遇到了这个问题。欢迎任何想法

提前致谢。

Answer 1

以下是我在javascript中更改的内容。您可以看到我只为每个private string ReplaceText(string originalText) { string replacedText = null; Regex regEx = new Regex("[your expression here]"); Match match = regEx.Match(originalText); if (match.Success) { Group matchGroup = match.Groups[2]; //[first part of original string] + [replaced text] + [last part of original string] replacedText = $"{originalText.Substring(0, matchGroup.Index)}[Your replaced string here]{originalText.Substring(matchGroup.Index + matchGroup.Length)}"; } else replacedText = originalText; return replacedText; }附加一次，仅附加一次。然后我只用一次调用替换了AJAX，将内容设置为id作为示例。

据我了解，这就是你所追求的目标。

id

这是更新的小提琴。 jsfiddle

使用JQUERY将ajax获取的数据添加到动态添加的元素中

1 个答案: