我们如何在Titanium网格视图项中实现Onclick功能

Question

我使用小部件（来自此代码）开发了gridview应用程序： https://github.com/pablorr18/TiDynamicGrid 我根据客户要求修改了代码。现在，如果我想点击列表项上的“查看购物车”按钮，它会弹出消息“已单击”。但是我尝试了各种方式，都找不到解决方案。请问有人可以解释一下如何编写此代码吗？

我在我的应用程序中遵循了以下代码：

var items = [];
var showGridItemInfo = function(e){
    alert("Onclick the row");
}; 

var delay = (OS_ANDROID) ? 1000:500;

$.tdg.init({
    columns:3,
    space:5,
    delayTime:delay,
    gridBackgroundColor:'#e1e1e1',
    itemBackgroundColor:'#fff',
    itemBorderColor:'transparent',
    itemBorderWidth:0,
    itemBorderRadius:5,
    onItemClick: showGridItemInfo
});

function createSampleData(){
    var sendit = Ti.Network.createHTTPClient({ 
        onerror: function(e){ 
            Ti.API.debug(e.error); 
            alert('There was an error during the connection'); 
        }, 
        timeout:10000, 
    });           
    sendit.open('GET', url+'android_livedev/client/test.php?action=listitems&categoryid='+subcategorylist_category_id+'&productmin=0&productmax=50');  

    sendit.send(); 
    sendit.onload = function(){ 
        var response = JSON.parse(this.responseText); 
        if(response[0].success == 0){
            alert("No Products Found");
        }
        else {
            items = [];   
            for (var x=0;x<response[0].data.length;x++){
                var view = Alloy.createController('item_layout',{
                    image:imageurl+response[0].data[x].thumb_image,
                    product:response[0].data[x].product,
                    productprice:"$"+" "+response[0].data[x].price,
                    onItemClick: addcart,
                }).getView();
                var values = {
                    product: response[0].data[x].product,
                    image: response[0].data[x].thumb_image,
                    productid : response[0].data[x].productid,
                };
                items.push({
                    view: view,
                    data: values
                });
            };
            $.tdg.addGridItems(items);
            reateSampleData();

            $.tdg.clearGrid();
            $.tdg.init({
                columns:nColumn,
                space:nSpace,
                delayTime:delay,
                gridBackgroundColor:'#e1e1e1',
                itemHeightDelta: 0,
                itemBackgroundColor:'#fff',
                itemBorderColor:'transparent',
                itemBorderWidth:0,
                itemBorderRadius:5,
                onItemClick: showGridItemInfo
            });
            createSampleData();

        });

        $.win.open();

item_layout.xml的代码如下：

<Alloy> 
    <View id="mainView"> 
        <ImageView id="thumb"/> 
        <Label id="product"></Label> 
        <Label id="productprice"></Label> 
        <Button id="addcart" onClick="additemtocart"/> 
    </View>
</Alloy>

编辑：

现在我正在从指定的视图中获取视图和按钮id。但如果我尝试点击按钮，就无法做到。您能否检查我的代码并提供解决方案。

我已添加了以下代码:

var view = Alloy.createController('item_layout',{
        image:imageurl+response[0].data[x].thumb_image,
        product:response[0].data[x].product,
        productprice:"$"+" "+response[0].data[x].price
    }).getView();
    var controller = Alloy.createController('item_layout'); 
     var button = controller.getView('addcart');
    button.addEventListener('click', function (e){
    alert("click");
     Ti.API.info('click');
    });

- Krishna Veni

---

请提供一个最小化、完整化和可验证的示例。上面的代码不完整且无法验证。 - Alvaro Montoro

Answer 1

首先将ID更改为类，因为它们是非唯一的。仅在必要时使用ID。其次，尝试类似于这样的内容：

尝试类似于这样的内容：

$('.addCart').click(function() {
    var item = $(this).silblings('.product').text;
    addItemToCart(item);
});

更好的做法是，在购物车按钮中添加一个 data-productId 属性，你可以这样做：

$('.addCart').click(function() {
    var itemId = $(this).attr('data-productId');
    addItemToCart(itemId);
});

这样更好，因为你只需要在屏幕上显示购物车按钮。

所有这些都说了，你也可能需要包含一个备用方案，当页面上没有JavaScript时，将商品添加到购物车中。

- charles

---

我尝试了你的答案，但是我无法得到解决方案。现在，我尝试了一些东西并获取了按钮ID。我已经更新了我的问题，请检查我的问题并给我一个解决方案。 - Krishna Veni

@KrishnaVeni，你混淆了jQuery的做事方式和JavaScript的做事方式。如果你正在使用jQuery，我建议尝试仅使用jQuery方法以提高可读性（将所有内容保留在同一API中）。因此，请使用$('.addCart').on('click', function() {alert('click'); });。当引用动态创建的元素时，您需要使用on方法。 - charles