jQuery单击附加的列表元素答案

【问题标题】：jQuery click on appended list elementjQuery单击附加的列表元素
【发布时间】：2017-11-09 04:09:27
【问题描述】：

我知道这个问题已经发布，但建议的解决方案不适用于我的情况：

我添加一个这样的元素：

var premier = '<div class="container col-md-8">' +
              '<div class="row">' +
              '<ul class="list">' +
              '<li class="title"><a id="'+ide+'" href="">'+nom+'</a></li>' +
              '<li class="artist">'+art+'</li>' +
              '<li class="stars"><img src='+stars+'></li>' +
              '<li class="gender">'+gen+'</li>' +
              '</ul>' +
              '</div>' +
              '<hr>' +
              '</div>';

使用这个命令：

$('.main').append(premier);

然后我想通过 onclick 函数访问元素 a：

$('#'+ide+'').on('click',function(){
  console.log("do it");
});

但它不起作用。我也有委托功能的探测，但也许我用错了。

【问题讨论】：

你也可以发布你的html
试试$('.main').on('click', '#' + ide, function(){ console.log("do it"); })

标签： jquery delegates append

【解决方案1】：

你需要使用on点击动态添加元素。

$( document).on( "click", "#"+ide, function() {
  console.log( $( this ).text() );
});

Fiddle

【讨论】：

@Laura ：你能创建一个小提琴吗？因为它在小提琴中工作。见这里jsfiddle.net/bqpkyjvu
它现在可以工作了！！！我认为问题出在这一行：'
' + nom + '

【解决方案2】：

如果您已经声明了变量，则声明您的变量无法在变量上获取您的值

var ide="hello";
var nom="hello2";
var art = 'hello3';
var stars = 'hello3';
var gen = 'hello3';
var premier = '<div class="container col-md-8">' +
  '<div class="row">' +
  '<ul class="list">' +
  '<li class="title"><a id="' + ide + '" href="">' + nom + '</a></li>' +
  '<li class="artist">' + art + '</li>' +
  '<li class="stars"><img src=' + stars + '></li>' +
  '<li class="gender">' + gen + '</li>' +
  '</ul>' +
  '</div>' +
  '<hr>' +
  '</div>';
  
$('.main').append(premier);

$('#' + ide + '').on('click', function() {
      alert("do it");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

</div>

【讨论】：

@Shiladitya 去试试吧
我是说 OP 发布了相同的代码。有什么不同？
这正是我所拥有的，我已经像你一样声明了变量，但它在我的情况下不起作用

【解决方案3】：

事件委托应该在动态元素上进行

$('.main').on('click', '#' + ide, function(){ 
  console.log("do it"); 
});

参考文档：http://api.jquery.com/delegate/

希望这会对你有所帮助。

【讨论】：