Question

我添加了一个foreach循环来生成jQuery中的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

您实际上是将字符串传递给 append（）方法。您需要使用美元符号（I.e. $）来创建新的div：

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

Answer 2

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

直接事件仅在调用.on（）方法时附加到元素。

因此，这可能是导致您的click处理程序在用户单击项目时不被调用的问题（如果在具有类 item 的元素上添加了单击处理程序，那么我们用该类名添加更多元素）。请参阅下面的示例，其中单击处理程序添加到整个文档，并基于项目的 id 或类，它采取不同的操作。

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

jQuery生成div

2 个答案: