0

我在这里学习教程：http: //blog.chariotsolutions.com/2012/01/from-list-to-details-view-using.html

我正在尝试在呈现时将单击处理程序动态绑定到列表视图项。上面链接中描述的方法不起作用。我已经尝试了几种选择..

本教程在渲染函数中建议了这一点：（模板如下）

    activities.each(function(activity){
        var renderedItem = template(activity.toJSON()),
        $renderedItem = $(renderedItem);  //convert the html into an jQuery object
        $renderedItem.jqmData('activityId', activity.get('id'));  //set the data on it for use in the click event
        $renderedItem.bind('click', function(){
           //This part is different in tutorial, but irrelevant
           alert("Hello.");
           alert($(this).jqmData('activityId'));    //'this' represents the element being clicked
        });
        listView.append($renderedItem);
    });

这不起作用。创建了按钮，但是当我单击时没有任何反应，并且 Chrome 的开发工具仅显示两个单击事件侦听器：文档和文档

我试过这些作为替代品，但没有任何效果。没有警报消息，没有断点命中，没有注册的点击事件监听器。...

$renderedItem.on('click', function(){
       alert("Hello.");
       alert($(this).jqmData('activityId'));     //'this' represents the element being clicked
   });

$renderedItem.live('click', function(){
       alert("Hello.");
       alert($(this).jqmData('activityId'));     //'this' represents the element being clicked
   });

我也尝试过注册事件的标准主干方式无济于事......

events: {
    'click .activity-list-item':'btnSelected'
},

...

btnSelected: function(){
    alert("Hello");
    //This is what I really want. Some data attached to the sender
    alert($(this).jqmData('activityId'));
}

这是模板：

<li><a href="#activity-details" class="activity-list-item"identifier="<%= id %>"><%= date %> - <%= type %></a></li>

女士们，先生们，谢谢你们的宝贵时间。

编辑：我做了一个测试，我认为，出于某种原因，绑定被删除了。我可以做这个：

    myCollection.at(0).bind('click', function(){
        alert("hello");
    });
    myCollection.at(0).trigger('click');

......它可以正常工作。绑定可能会被删除是否有原因？

编辑2：这仍然没有解决。不幸的是，我的临时解决方案就是这样。我可以删除所有列表视图项目、重新填充和刷新，并且仍然具有可点击性，但如果我将项目附加到列表中，它们将不可点击。.bind、.on、.live、.delegate。它们都不起作用。我真的希望有更多关于此的文档。这是一个常见的编程问题，没有通用的解决方案。

4

3 回答 3

1

看起来 jquerymobile 可能正在拦截和取消绑定您的事件绑定。这仍然只是一个猜测，因为我现在没有设置测试 JQM 应用程序，但看起来有一个设置可以关闭 jqm 对链接的事件绑定的默认控制，linkBindingEnabled.

你可以这样设置：

$(document).bind("mobileinit", function () {
  $.mobile.linkBindingEnabled = false;
});

试试看，看看它是否能把你带到任何地方......如果没有，回到绘图板:)

于 2012-06-14T21:20:17.620 回答
0

看来我的问题源于多次调用渲染方法。我有这个：

    //in the render method
    $(this.el).empty();

它用于清除列表视图并重绘新修改的集合。当一个项目被添加到集合中时，我正在调用 render 方法来清除所有项目并重新绘制它们。

这显然是从我的观点中删除事件处理程序。这似乎违反直觉。第一次能用，为什么不能再用？jQuery .empty() 文档：

    "To avoid memory leaks, jQuery removes other constructs such as data and 
    event handlers from the child elements before removing the elements 
    themselves."

为了解决这个问题，我在空之前添加了一个分离：

   $(this.el).detach();
   $(this.el).empty();

由于我的新手，我不确定这是否是一个好习惯，但它有效，如果我正确理解这一点，我会在清除它们之前将事件侦听器从项目中分离出来。从而为未来的列表项保留听众。

本质上，在视图本身上调用 .empty() 方法 $(this.el) 似乎删除了使用我的渲染函数中的方法添加更多事件处理程序的能力。我的猜测是在执行 .empty() 之后还有另一种添加事件处理程序的方法。如果有人可以确认或纠正我，我会很高兴。

于 2012-06-15T16:37:27.407 回答
0

稍后在您的代码中您的 listView var 会发生什么？更具体地说，listView 元素是如何附加到 DOM 的？如果在将 listView.html() 添加到 DOM 时使用它，所有子元素都会丢失附加到它们的数据和事件。

于 2012-06-14T21:25:39.147 回答