javascript - jQuery 生成 div

Question

我在 jQuery 中添加了一个 foreach 循环来生成 div。它目前正在工作，但由于某种原因，我的 div 似乎没有 SOME 类属性。这是我正在使用的代码:

$("#item-container").append("<div class=\"panel col-md-2 col-xs-4 item\" style=\"height:170px;  border-bottom-color: red;\"></div>")

所以只是简单的 div。现在我做了一些样式:

.item {
margin: 10;
 border-style: solid;
   cursor: pointer;
   border-bottom-width: 2px;
}

这工作得很好。但是我有另一个 JS 函数。基本上，它只是更改具有 item 类的所选 div 的颜色。现在，当我用 PHP 生成 div 时，我的函数工作正常。但是现在由于某种原因它不起作用。此外，应用了上面的样式，但由于某些原因这并不适用

item h5,h6,img{
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
   -khtml-user-select: none; /* Konqueror */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none;
          -webkit-user-drag: none;
 -khtml-user-drag: none;
 -moz-user-drag: none;
 -o-user-drag: none;
 user-drag: none;

如果你知道发生了什么，请回复

编辑:弄清楚为什么 css 不起作用，这是有问题的功能:

$('.item').click(function () {
    var currentprice
    var itemprice
    itemprice= parseFloat($(this).find('.item-price').html());
    currenptice = $('#currentprice').text();
    if ($(this).hasClass( "selected-item" )) {
      $('#currentprice').text(parseFloat(currenptice)-itemprice);
      $(this).removeClass("selected-item");
    } else {
        $('#currentprice').text(parseFloat(currenptice)+itemprice);
      $(this).addClass("selected-item");
    }
  });

当我用 PHP 生成 div 时工作正常，但不工作。

Answer 1

了解 event delegation .在那个页面上，它提到了这个事实:

Direct events are only attached to elements at the time the .on() method is called.

所以这可能是导致您的 click 的问题当用户单击一个元素时不调用处理程序(如果单击处理程序添加到类 item 的元素上，然后我们添加更多具有该类名的元素)。请参阅下面的示例，其中将点击处理程序添加到整个文档，并根据元素的 id 或 class 采取不同的操作。

另一个变化是用单引号而不是双引号分隔新 div 元素的字符串，这允许使用双引号而不需要转义字符。

$("#item-container").append('<div class="panel ....');

$(document).ready(function(readyEvent) {
  $(document).click(function(clickEvent) {
    var element = $(clickEvent.target);
    if (element.attr('id') == 'add') {
      AddItem();
    }
    if (element.is('.item')) {
      ItemClickHandler(element);
    }
  });
});

function AddItem() {
  $("#item-container").append('<div class="panel col-md-2 col-xs-4 item" style="height:20px;  border-bottom-color: red;"><span class="item-price">2</span></div>');
}

function ItemClickHandler(element) {
  var currentprice;
  var itemprice;
  itemprice = parseFloat(element.find('.item-price').html());
  currentprice = $('#currentprice').text();
  if (element.hasClass("selected-item")) {
    $('#currentprice').text(parseFloat(currentprice) - itemprice);
    element.removeClass("selected-item");
  } else {
    $('#currentprice').text(parseFloat(currentprice) + itemprice);
    element.addClass("selected-item");
  }
}

.item {
  margin: 10;
  border-style: solid;
  cursor: pointer;
  border-bottom-width: 2px;
}
item h5,
h6,
img {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
.selected-item {
  background-color: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="currentprice">3.50</div>
<button id="add">add item</button>
<div id="item-container"></div>