Question

基本上，我有一个动态创建的列表，我事先不知道会有多少项目。

我需要每个人在点击时启动稍微不同的Ajax功能。

我目前正在使用JQM作为模态框（如果有人知道更好的话，很乐意切换）。

以下代码适用于使所有.ajaxpopup项目启动相同的页面：

  $().ready(function () {
            $('#dialog').jqm({ ajax: "/QuestionManager/AjaxPopup/1", trigger: ".ajaxpopup" });

            $(".ajaxpopup").click(function (e) {
                e.preventDefault();
            });

但是，我需要每个项目启动一个不同的页面（1/2 ...我不提前知道ID。）

我真的很喜欢Adam关于在元素中添加data-itemid标签的答案，但是，我似乎无法真正做到这一点。

我不知道这是JQM限制还是由于它的启动方式。

我最接近的是：

$(document).on("click", "a", function () {
        var itemId = $(this).data("itemid");

        $('#dialog').jqm({ ajax: "/QuestionManager/AjaxPopup/"+itemId, trigger: ".ajaxpopup" });
    });

我还用alert(itemId)替换了对话行，这给出了正确的结果，所以，我知道我走的是正确的道路 - 我似乎无法完成这项工作！

有人可以帮忙吗？

Answer 1

您可以通过jQuery的live和on函数连接dyanmically添加的内容以响应事件。

因此，如果我理解您的特定情况，您希望这些文本节点在单击时启动jqm模式吗？并且您希望模型的itemId成为它的一部分吗？

首先，通过数据属性将itemId添加到文本中：

@foreach (var item in Model.Routines)
{
    <text data-itemid='@item.itemId'></text>
} //(sorry if the razor syntax is off a bit - that's not my expertise

然后：

$(document).on("click", "text", function() { 
    var itemId = $(this).data("itemid");
    var textnodeText = $(this).text();
    $('#dialog').jqm({ ajax: "/QuestionManager/_AjaxCreateQuestionInitial/" + textnodeText, 
                       trigger: itemId });
});

修改

根据你的评论，如果你有这个html：

<a href="/test/AddData" data-itemid="1">Add Data</a>

您可以像这样处理点击事件：

$(document).on("click", "a", function() { var itemId = $(this).data("itemid"); //now run your ajax call });

Answer 2

为什么不在Contoller上创建一个提供Action的JsonResult，它会提供您需要的项目列表？一旦到位，我将迭代JSON数组并生成框。

假设您的数据是（例如 - 这需要由您的控制器生成）

var data = [ 
 {"Id": 1, "Name": "A"}, 
 {"Id": 2, "Name": "B"}, 
 {"Id": 3, "Name": "C"}
];

你的javascript（jquery）循环来处理你的盒子

$.each(data, function(i, item) {
    //replace with your dialog code 
    alert(data[i].Id+" "+data[i].Name);
});

如何基于“data-”属性执行Ajax模式弹出窗口？

2 个答案: