1

アプリケーションでjqueryUIタブを使用しています。最初は、タブペインは空です。タブは動的に作成されます。各タブには、デフォルトで保存ボタンがあります。次のコードを見てください。タブは正常に表示されます。複数のタブがある場合に問題が発生します。たとえば、タブが3つあり、それぞれに3つの保存ボタンがある場合。クリックイベントは最初のタブからのみ発生します。イベントは他のタブからは発生しません。最初のタブから[保存]ボタンをクリックした場合にのみ、「保存から」と「こんにちは」というアラートが表示されます。2番目と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 に答える