我想知道,如何创建选择器,链接到动态创建的元素,而不在动态创建的元素上使用事件?
注意:动态创建的元素我指的是元素,开头不是HTML格式
我知道我可以使用$(this),当我在元素上有事件(例如.click)时,但是当我没有事件并且我需要动态创建元素的选择器时?
感谢所有人。
更新:这是我的情况:
$(".product div a").click(function() {
var nameOfProduct = $(this).parent().find("h3").text();
var dataPrice = parseInt($(this).parent().find("div b").text());
var isProductIn = false;
var itemsInDay = $(/*HERE I NEED THE SELECTOR*/).find("div.item").nextUntil("div.center");
itemsInDay.each(function () {
if (nameOfProduct == ($(this).find("span ins span").text())) {isProductIn = true;};
});
if (isProductIn) {
//add only +1, not new product again;
} else {
var imgOfProduct = $(this).parent().parent().find("img").attr('src').replace('med', 'min');
var product = ('<div class="item" data-price="' + dataPrice + '"><img src="' + imgOfProduct + '"><span><ins><b>1x</b> ' + nameOfProduct + '</ins><a href="#"><img src="images/delete.png"></a></span></div>');
$(product).appendTo(".dayOrder:last").delay(800).hide().slideDown();
}
return false;
});
答案 0 :(得分:1)
尝试一下这个http://jsfiddle.net/pEb7D/5/
HTML:
<div class="test"></div>
使用Javascript:
dynamicSelector = $('.test').append('<div class="newElement">Hello!</div>');
setTimeout(function () {
dynamicSelector.text('Goodbye!');
}, 3000);
更新:
好的,所以你将这些项目放入.orderDay:last
元素。在那里你可以遍历它的内容,看看你是否已经有一个或其他类型的现有元素。
但是我建议根据产品ID制作一个数组然后对此作出反应。 例如http://jsfiddle.net/8byQp/
使用Javascript:
daysOrderArray = [];
$(".product div a").click(function() {
var nameOfProduct = $(this).parent().find("h3").text();
var imgOfProduct = $(this).parent().parent().find("img").attr('src').replace('med', 'min');
var dataId = $(this).parent().parent().data("id");
var dataPrice = parseInt($(this).parent().find("div b").text());
priceSum += dataPrice;
updatePrice(priceSum);
if(dataId in daysOrderArray){
// Now add number rather than new product.
daysOrderArray[dataId]++;
$('.item[data-id="' + dataId + '"] .quantity').text(daysOrderArray[dataId]);
} else {
daysOrderArray[dataId] = 1;
var product = ('<div class="item" data-id="' + dataId + '" data-price="' + dataPrice + '"><img src="' + imgOfProduct + '"><span><ins><b><span class="quantity">1</span>x</b> ' + nameOfProduct + '</ins><a href="#"><img src="images/delete.png"></a></span></div>');
$(product).appendTo(".dayOrder:last").delay(800).hide().slideDown();
return false;
}
});