Question

我在这里关注教程：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
   });

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

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。他们都没有工作。我真的希望有更多关于此的文档。这是一个常见的编程问题，没有通用的解决方案。

Answer 1

看起来jquerymobile可能正在拦截＆amp;解除绑定事件绑定。这仍然是一个猜测，因为我现在没有设置测试JQM应用程序，但看起来有setting关闭jqm对链接linkBindingEnabled的事件绑定的默认控制。

您可以这样设置：

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

试试看，看看它是否能让你到处......如果没有，请回到绘图板：）

Answer 2

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

Answer 3

似乎我的问题源于多次调用render方法。我有这个：

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

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

显然，这是从我的视图中删除事件处理程序。这似乎违反直觉。它第一次工作，为什么它不会再次工作？ jQuery .empty（）doc：

    "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）似乎删除了ABILITY，以便在我的渲染函数中使用该方法添加更多事件处理程序。我的猜测是，在执行.empty（）之后还有另一种方法来添加事件处理程序。如果有人可以确认或纠正我，我会喜欢它。

无法使用Backbone和jQuery Mobile和Sender Data动态绑定Click Handler

3 个答案: