JQuery Mobile - 동적으로 생성 된 버튼에 이벤트 핸들러 할당

Question

서버에서 json 배열을 얻은 다음 루프를 반복하여 페이지에 버튼 (data-role = "button")을 추가합니다. 각 반복에서 $ ("[data-role = 'button']"). button()을 호출합니다.

내 문제는 각 단추는 동일한 이벤트 처리기를 호출해야하지만 다른 ID를 사용해야한다는 것입니다. Java/GWT에서이 작업을 수행했다면 id를 각 버튼의 이벤트 핸들러 구현에 사용하는 생성자로 전달했습니다.

JQuery Mobile에서 어떻게 동일한 결과를 얻을 수 있습니까?

아래의 코드는 두 개의 버튼을 만들지 만 클릭 할 때 아무런 반응이 없습니다. 당신이 (추가 할 수있는 HTML을 구축) 버튼을 추가 할 때

success: function(data) { 
       $('#personPage div[data-role="content"]').empty(); 
       for (var i = 0;i < data.length;i++){ 
        $('#personPage div[data-role="content"]').append('<a href="#" id="person_' + data[i].id + '" data-role="button" data-id="person_' + data[i].id + '">' + data[i].name + '</a>'); 
        $("a[data-role='button']").button(); 
        $("#person_" + data[i].id).bind('click', function(event) { 
          alert('It WOrks'); 
         }); 
        }); 
       } 
      } 

Answer 1

는 또한 JSON 배열에서 ID와 같은 값으로 데이터-id 속성을 추가

여기 내 코드입니다.

<a data-role="button" data-id="1234">1234 Button</a> 

을 그리고 온 클릭 이벤트 처리기에서이 같은 ID를 얻을 : 그래서 html 태그는 마지막으로 다음과 같이 것을이다

var id = $(this).data('id'); 

합니다.

데이터 속성에 대해 자세히 알아 보려면 http://api.jquery.com/data/을 참조하십시오.