如何创建选择器,链接到动态创建的元素?

时间:2014-02-17 13:24:42

标签: javascript jquery html

我想知道,如何创建选择器,链接到动态创建的元素,而不在动态创建的元素上使用事件?

注意:动态创建的元素我指的是元素,开头不是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;
});

1 个答案:

答案 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;
            }
        });