Jquery 显示一个动态加载的 div答案

【问题标题】：Jquery show a dynamically loaded divJquery 显示一个动态加载的 div
【发布时间】：2023-03-28 02:28:01
【问题描述】：

我有一堆 DIVS，它们是由 jquery AJAX 调用动态加载的。 DIVS 都有一个锚点，其类为 .more_info，id 为 info-xxx（其中 xxx 是产品 id）。有一个隐藏的 div，id 为 infoxxx，我想在点击链接时显示它。

我的代码：

$(document.body).on('click', '.more_info' ,function(){
    var dealid = ($(this).attr('id')); 

    $("#info"+dealid).show(1000);  

  });

但 div (infoxxx) 不显示。我猜还有其他方法可以访问该 div，因为它是动态加载的？

【问题讨论】：

只是为了澄清，当你使用console.log(dealid)时，你得到正确的dealid吗？你刚才说id属性的格式是info-123，所以dealid的值会是info-123而不是123，对吗？
当使用.attr('id') 时，为什么要在.show() 的选择器中添加#info，我假设您只需要# 或者除了dealid 之外什么都不需要
谢谢大家，这两位 cmets 都为我指明了正确的方向。最初的编码器正在使用不需要的 id 我已经将它简化为 dealid（没有信息）并且它按计划工作。谢谢。

标签： jquery dom

【解决方案1】：

根据提供的详细信息，从 ($(this).attr('id')) 生成的 dealid 将采用 info-xxx 格式，因此当您尝试时

$("#info"+dealid).show(1000);

会是这样的

$("#infoinfo-xxx").show(1000);

所以通过替换信息文本来获得正确的 id

$(document.body).on('click', '.more_info' ,function(){
    var dealid = ($(this).attr('id')).replace("info-",""); 

    $("#info"+dealid).show(1000);  

  });

【讨论】：

【解决方案2】：

我不知道我是否准确地获得了 HTML，但主要思想是这样的：

var prodID = dealID.split('-').pop();

dealID 是模式info-xxx

在连字符处使用 split('-') 并以 2 个元素的数组结尾 ['info', xxxx]

然后将pop() 链接到split() 方法并在返回时获得xxxx。

演示

$(document.body).on('click', '.more_info', function() {
  var dealID = ($(this).attr('id'));

  var prodID = dealID.split('-').pop();

  $("#info" + prodID).show(1000);

});

.more_info::after {
  content: attr(class)
}

<div>
  <a href='#/' id='info-1234' class='more_info'></a>
</div>
<input id='info1234' hidden>

<div>
  <a href='#/' id='info-1359' class='more_info'></a>
</div>
<input id='info1359' hidden>

<div>
  <a href='#/' id='info-6911' class='more_info'></a>
</div>
<input id='info6911' hidden>

<div>
  <a href='#/' id='info-5227' class='more_info'></a>
</div>
<input id='info5227' hidden>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：