Jquery UI 탭에서 이벤트가 실행되지 않습니다.

Question

내 응용 프로그램에서 jquery UI 탭을 사용하고 있습니다. 처음에는 탭이 비어 있습니다. 탭은 동적으로 생성됩니다. 각 탭에는 기본적으로 저장 버튼이 있습니다. 다음 코드를 살펴보십시오. 탭이 정상적으로 나타납니다. 여러 개의 탭이있는 경우 문제가 발생합니다. 예 : 3 개의 탭이 있고 각 탭에 3 개의 저장 버튼이있는 경우 첫 번째 탭에서만 이벤트 발생을 클릭하십시오. 이벤트가 다른 탭에서 실행되지 않습니다. 첫 번째 탭에서 저장 버튼을 클릭 할 때만 "save from"및 "hello"라는 경고가 나타납니다. 두 번째 및 세 번째 탭에서 저장 버튼을 클릭해도 아무런 변화가 없습니다. 내가 놓친 게 있는지 말해 줄 수 있니? 감사합니다. .

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"); 
});