1

我在我的应用程序中使用 jquery UI 选项卡。最初，选项卡窗格是空的。选项卡是动态创建的。默认情况下，每个选项卡都有一个保存按钮。请看下面的代码。标签看起来很好。如果我有多个选项卡，则会出现问题。例如：如果我有 3 个选项卡，每个选项卡上有 3 个保存按钮。单击事件仅从第一个选项卡触发。事件不会从任何其他选项卡触发。只有当我从第一个选项卡单击保存按钮时，我才会收到“来自保存”和“你好”的警报。当我从第二个和第三个选项卡单击保存按钮时，它什么也不做。如果我遗漏了什么，你能告诉我吗？谢谢。

MyModel = Backbone.Model.extend({

    defaults: {
        name: "Name",
        contents: "<div><table><tr>"+
                "<td><button id='save' value='Save'>Save</button></td>"+
                "</tr></table></div>"

    }

  });



MyView = Backbone.View.extend({


      initialize: function() {
        _.bindAll(this, 'render');
      },
      events: {
            "click #save" : "save"
      },
      save: function(){
        alert("from save");

      },
      render: function() {
        // add the actual content
        $("#tabs").append('<div id="tab_' + this.model.cid + '">'
            + this.model.get('contents')
            + '<br /><br /><br />'
            );

        // ask jQueryUI to add the tab to the bar
        $("#tabs").tabs("add", "#tab_" + this.model.cid, this.model.get('name'));
         $("#save").live("click", function(){
          alert("hello");
        });
        return this;
      }
});


var view = new MyView({ 
                model: model, 
              });
view.render();
4

1 回答 1

0

ID 应该是唯一的。我的猜测是您正在创建多个#save按钮。尝试将其更改为类。

附带说明，live()已弃用。如果您使用的是新版本的 jquery，我建议您使用该on()方法。一些伪代码：

$("#container").on("click", ".savebutton", function(){
      alert("hello");
});
于 2012-10-26T08:28:36.720 回答