Question

我正在使用jQuery构建一个简单的应用程序来保存您的符号。我使用表单和此脚本将项添加到列表中：

$(document).ready(function() {
$('.add').click(function() {
    var item = $('#todo')
    if( $('#todo').val().length> 0)  {
        $('div.lists').prepend("<div class='listItem'>"+item.val()+"</div>");
        localStorage["myKey"] = JSON.stringify($(".lists").html());
        $('#itemForm').toggle();
        $('#todo').val(' ')
    }
});
});

这部分工作正常。但是当我尝试将id添加到特定的单击div时，没有任何反应。我这样做：

$(document).ready(function() {
$('div.listItem').on("click",function() {
    $(evt.target).attr('id', '#selected');
});
});

我找不到错误。我希望有人可以提前帮助我。

Answer 1

它不起作用，因为您动态添加元素：

$('div.lists').prepend("<div class='listItem'>"+item.val()+"</div>");

这些动态添加的元素没有附加事件处理程序，因为它们是在文档准备好并且运行$('div.listItem').on("click",function() {之后添加的。

尝试委托活动

$(document).on("click",'div.listItem',function() {
    $(evt.target).attr('id', '#selected');
});

附注：我建议使用类selected而不是ID来避免如果有多个具有相同Id的元素时可能出现的问题。

Answer 2

$('div.listItem').on("click",function() {
    $(this).attr('id', '#selected');
});

但这没有任何意义tbh - 这将添加#selected

的id

这就是你想要做的吗？

Answer 3

如果您使用类而不是id来确定选择了哪个元素，您可以执行以下操作：

$('div.listItem').on("click",function() {
  // Remove any other items with .selected
  $('div.listItem.selected').removeClass('selected');

  // Add class to the clicked element
  $(this).addClass('selected');
});

Answer 4

谢谢khanh，你让我走上正轨。你发布的内容最初没有用。然后我写了这个

$(document).on("click",'.listItem',function() {
if ( $( this ).hasClass( "selected" ) ) {
$(this).removeClass('selected');
var select=0;
}
else {
$(this).addClass('selected');
var select=1;
}

这就完成了这项工作。变量用于其他目的：）

在添加的div上调用click事件

4 个答案: