Question

我在我的应用程序中使用jquery UI选项卡。最初，tabpane是空的。标签是动态创建的。每个选项卡默认都有一个保存按钮。请查看以下代码。标签显示正常。如果我有多个选项卡，则会出现此问题。例如：如果我有3个标签，每个标签上有3个保存按钮。 Click事件仅从第一个选项卡触发。事件不会从任何其他选项卡触发。只有当我从第一个选项卡中单击“保存”按钮时，才会收到“来自保存”和“你好”的警报。当我从第二个和第三个选项卡单击“保存”按钮时，它不执行任何操作。如果我遗失任何东西，你能告诉我吗？感谢。

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();

Answer 1

ID应该是唯一的。我的猜测是你创建了多个#save按钮。尝试将其更改为班级。

在旁注中，不推荐使用live()。如果您使用的是新版本的jquery，我建议您使用on()方法。一些伪代码：

$("#container").on("click", ".savebutton", function(){
      alert("hello");
});

事件未在Jquery UI选项卡中触发

1 个答案: