Question

请参阅我的测试网站here。

脚本写在<head>中，因此您可以在那里看到它。

说明

如果单击蓝色区域，将生成一个新元素。这样做四到五次。现在单击刚刚创建的所有元素。它们都应该有黑色轮廓。但是，有些人有，有些则没有。

其他信息：

目前仅在镀铬上测试过。

关于这里出了什么问题的任何想法？

Answer 1

每次创建新的气泡时，您都会将点击侦听器添加到所有气泡。

使用live侦听器添加侦听器一次。它可以在创建任何气泡之前设置。

不要使用数字id属性，HTML不允许这样做。

此外，您正在切换active课程 - 这是一个较短的功能 - toggleClass。

Answer 2

您可以使用此简化：

$(function () {
  // CREATE A NEW BUBBLE

  $('.drop').click(function(event){
    Bubble(event);
  });

  var newBubbleId = 0;
  function Bubble(event,bubbleClass){
    // Create Element
    var id = newBubbleId++;
    var bubble = $('<div class="bubble" id="b_'+id+'" draggable="true"><input id="bubbleText" type="text" name="text" value="'+id+'" /></div>');
    $('body').append(bubble);

    // Position Element
    var bubbleWidth = bubble.width();
    var bubbleHeight = bubble.height();
    var x = event.pageX - (bubbleWidth*0.5);
    var y = event.pageY - (bubbleHeight*0.5);
    bubble.offset({top:y, left:x});
    bubble.click(function () {
      $(this).toggleClass("active");
    });
  }

});

我看到其他一些问题。如前所述的数字ID。此外，所有输入元素都具有相同的ID，这是不允许的。每个文档只有一个ID。如果希望它们具有相同的名称，可以使用Name属性。

此外，您的计数器功能并不理想。

但这可以解决你的问题。

追加和操纵元素

2 个答案: