jQuery生成div

Question

我添加了一个foreach循环来在jQuery中生成div。它目前正在工作，但看起来像我的div没有某些类属性出于某种原因。这是我正在使用的代码：

$("#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功能。基本上它只是改变了所选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。在该页面上，它提到了这个事实：

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

所以这可能是导致您的click处理程序，当用户点击一个项目（如果元素被添加类项目单击处理不要被所谓的问题，然后我们增加与更多的元素班级名称）。请参阅下面的示例，其中点击处理程序添加到整个文档中，并基于该项目的ID或类别，它采取不同的操作。

另一个变化是用单引号而不是双引号为新的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>

Answer 2

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

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