Question

所以我有几个项目使用Jquery从数据库迭代，对于每个项目，我输出一个按钮来选择该特定项目，当我点击该行的按钮时，我想将详细信息发布到MVC中的控制器。

$.each(data, function (i, val) {
    var item = $('<div></div>');
    item.append('<h2><a>' +val.Name+ '</a></h2>');              
    item.append('<a id="button">SELECT</a>');
    tab.append(item);
});

我有按钮的这个功能：

$('#myId').on('click', 'a#button', function () {
    alert('Name'+val.Name+'');  
    var item = { Name: val.Name };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: "{item:" + JSON.stringify(item) + "}",
        url: "/Person/GetData"
    });
});

如果我在循环中添加函数，它将迭代与其中的项目一样多次。那么我怎么处理这个以便在按下SELECT按钮后发送名字？

Answer 1

使用DOM遍历方法获取所需元素以提取要传递给$.ajax()的文本

由于HTML中的标识符必须是唯一的，因此使用CSS类选择器来定位它们

$.each(data, function (i, val) {
    var item = $('<div></div>');
    item.append('<h2><a>' + val.Name + '</a></h2>');
    item.append('<a class="button">SELECT</a>');
    tab.append(item);
});

在事件处理程序中，使用.prev()定位同级<H2>元素

$('#myId').on('click', 'a.button', function () {
    var item = {
        Name: $(this).prev('h2').find('a').text()
    };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: {
            item: item
        },
        url: '@Url.Action("GetData", "Person")' //Note: this will not work in separate JS file
    });
});

Answer 2

将点击移动到任何循环外的页面底部，

将您的点击事件的ID更改为类item.append('<a class="button">SELECT</a>');以选择正确的值

$('#myId').on('click', 'a.button', function () {
    var val = $(this).prev('h2 a').text();//get the val.Name value
    var item = { Name: val};//create a object
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: item,//jquery will take care of the encoding
        url: "/Person/GetData"
    });
});

从循环中访问循环的项目

2 个答案: