Question

我知道这个问题已经发布，但提出的解决方案在我的案例中不起作用：

我追加一个这样的元素：

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

但它不起作用。我也使用委托函数进行探测，但也许我使用它错了。

Answer 1

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

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

Fiddle

Answer 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>

Answer 3

事件委托应该在动态元素上完成

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

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

希望这会对你有所帮助。

jQuery单击附加列表元素

3 个答案: