onclick help - reading the value of a specific class

I hope my description will not be too confusing! I am trying to integrate a javascript shopping cart, simplecart-js, into a Jquery LightBox, Yoxview. Yoxview has an option to add button links in the popup title pane for various options, downloading, shopping cart, etc. The relevant code for the shopping cart button is:

var yoxviewCartButton = $("<a>", {
    title: "Add to cart",
            href: "javascript:;",
    onclick:"simpleCart.add('name=Awesome', 'price=14.95','quantity=1');"
        });
        yoxviewCartButton.append($("<img>", {
            src: "yoxview/images/yoxview_cart_icon.png",
            alt: "Add to cart",
            css: { width: 18, height: 18 },

        }));

the specific integration for shopingcart-js into the button is:

href: "javascript:;",
onclick:"simpleCart.add('name=Awesome', 'price=14.95','quantity=1');

the html structure I'm using is:

<a class="item yoxview simpleCart_shelfItem" href="pics/pic0.png" title="Test1">
<img class="content" src="pics/pic0.png" title="Test1"/>
<span class="caption item_name">Pic 0 
<span class="item_price">$14.99</span></span></a>

The onclick event works but inputs the same info for each image, obviously, so I am trying to get the "item_name" and "item_price" for each "simpleCart_shelfItem" to input into the name= and price= field of the onclick event. I'm not sure how to get jquery to input these values. Any help or direction would be greatly appreciated.

BTW, Before I tried butchering this code, the original code was set to show an alert:

 var yoxviewCartButton = $("<a>", {
            title: "Add to cart",
            href: "#",
            click: function(e){
                e.preventDefault();
                alert("The image \"" + $(this开发者_运维技巧).data("yoxview_cart") + "\" can be added to cart through AJAX.");
            }
        });
        yoxviewCartButton.append($("<img>", {
            src: "../images/yoxview_cart_icon.png",
            alt: "Add to cart",
            css: { width: 18, height: 18 }
        }));

        $(".yoxview").yoxview({ 
            infoButtons: {
                download: yoxviewDownloadButton,
                cart: yoxviewCartButton
            },
            onSelect: function(i, image)
            {
                $.yoxview.infoButtons.download.attr("href", image.media.src);
                $.yoxview.infoButtons.cart.data("yoxview_cart", image.media.src);
            }
        });
    });

---

Don't set onclick as an attribute from a string. It's ugly and won't work in IE. Use jQuery's own event handling methods like click().

Also, don't use a link for something that isn't a link (especially with a javascript: URL; avoid). You don't want to give the user link affordances like open-in-new-window that simply aren't present. Use a button, and if you don't want it to look like a button you can use CSS to remove background, borders etc.

$('.simpleCart_shelfItem').each(function() {
    var name= $(this).children('span')[0].firstChild.data;
    var price= $(this).find('span>span').text().replace('$', '');
    var button= $('<button/>', {type: 'button', 'class': 'looksUnlikeAButton'});
    button.append($('<img/>', {src: 'yoxview/images/yoxview_cart_icon.png', title: 'Add to cart', width: 18, height: 18});
    button.click(function() {
        simpleCart.add('name='+name, 'price='+price, 'quantity=1');
    });
    $('#whereeverYouWantToPutIt').append(button);
});

(this uses plain DOM firstChild.data to pick off the initial text in the outer <span>. Normally you would use text(), but that would return the price in the nested span as well. It would be easier if they were two separate spans, you could just text() on each one.)