Question

我从服务器返回一个json数组，然后我遍历它并向页面添加按钮（data-role =“button”）。我在每次迭代中调用$（“a [data-role ='button']”）。button（）。

我的问题是每个按钮需要调用相同的事件处理程序但具有不同的id。如果我在Java / GWT中这样做，我会将id传递给每个按钮的事件处理程序的自定义实现的构造函数。

我如何在JQuery Mobile中实现相同的目标？

下面的代码创建了两个按钮，但是当我点击它们时没有任何反应。

这是我的代码：



success: function(data) {
                $('#personPage div[data-role="content"]').empty();
                for (var i = 0;i < data.length;i++){
                    $('#personPage div[data-role="content"]').append('<a href="#" id="person_' + data[i].id + '" data-role="button"  data-id="person_' + data[i].id + '">' + data[i].name + '</a>');
                    $("a[data-role='button']").button();
                    $("#person_" + data[i].id).bind('click', function(event) {
                          alert('It WOrks');
                        });
                    });
                }
            }

success: function(data) { $('#personPage div[data-role="content"]').empty(); for (var i = 0;i < data.length;i++){ $('#personPage div[data-role="content"]').append('<a href="#" id="person_' + data[i].id + '" data-role="button" data-id="person_' + data[i].id + '">' + data[i].name + '</a>'); $("a[data-role='button']").button(); $("#person_" + data[i].id).bind('click', function(event) { alert('It WOrks'); }); }); } }

Answer 1

当您添加按钮（构建要附加的html）时，还要添加一个data-id属性，其值为JSON数组中的id。所以html标签最终会是这样的：

<a data-role="button" data-id="1234">1234 Button</a>

在onclick事件处理程序中获取如下id：

var id = $(this).data('id');

就是这样。

请参阅http://api.jquery.com/data/以了解有关数据属性的更多信息。

JQuery Mobile - 为动态创建的按钮分配事件处理程序

1 个答案: