我可以使用事件定位同时附加父节点和子节点吗?

Question

我试图使用事件定位来创建一个无序列表，列表项包含不同的单击复选框的值。

$(this).click(function(e) {
    var myElem = document.getElementById(e.target.name);
    var price = parseInt(e.target.value);
    if (myElem == null){
        $('.container').append('<ul id="'+e.target.name+'">'+e.target.name+'</ul>');
    }
    if ($(this).name = myElem){
        if ($(this).is(':checked')){     
            sum += price;
            $('#'+e.target.name+'').append('<li>Cost: $'+sum+'</li>');
        } else {
            sum -= price;
            $('#'+e.target.name+' li').last().remove();
        }
    }

除了第一个列表项之外，它可以工作。我认为这是因为第一个列表项无处可去，因为无序列表是同时生成的。是否有一种方法可以同时创建或延迟列表项的创建，直到无序列表后?

这是一个工作小提琴:http://jsfiddle.net/dfzrt3qt/2/

Answer 1

当前的实现存在很多问题。

点击事件由复选框触发。您正在尝试瞄准id = e.t agtarget .name的元素，即"productname"。不存在这样的元素。

var myElem = document.getElementById(e.target.name);

第一次点击不显示金额的原因是因为你的目标是'ul'标签，它没有值属性。

 $('.container').append('<ul id="'+e.target.name+'">'+e.target.name+'<ul>');
 var price = parseInt(e.target.value);
  $('#'+e.target.name+'').append('<li>Cost: $'+sum+'</li>');

这是如何修复它:(更新)

$('.days').find(':checkbox').each(function() {
        $(this).click(function(e) {    
            var sum = 0;
            var price = parseInt(e.target.value);
            if ($('ul[id="' + e.target.name + '"]')[0] == undefined){
                $('.container').append('<ul id="' + e.target.name + '">'+e.target.name+'</ul>');
             }
            sum += parseInt($('#' + e.target.name + " li").attr("value"));
             if(isNaN(sum))
                 sum = 0;
            if ($(this).is(':checked')){    
                    sum += price;          
                }
                else{
                    sum -= price;                   
                }
             $('#' + e.target.name + " li").remove();
            $('#' + e.target.name).append('<li value="' + sum + '">Cost: $'+sum+'</li>');
        });
    });

http://jsfiddle.net/dfzrt3qt/4/