jquery 동적 목록보기 전달 데이터

일부 초심자 문제가있는 ... 사례 : id = "123"인 li 요소를 ul listview에 추가하는 버튼입니다. 이 새로운 li 요소를 클릭하면 "id 123"이라고 표시된 새 페이지가 나타납니다.jquery 동적 목록보기 전달 데이터

li 요소가 하드 코딩되고이 버튼으로 추가되지 않는 한 작동합니다. 내 잘못은 무엇입니까?

<script> 
      var passDataObject = { selectedId: null } 

      $(document).ready(function(){ 
       $("#acclist li").on("click", function(e){ 
        e.preventDefault(); 
        passDataObject.selectedId = this.id; 
        $.mobile.changePage('#accountdetail'); 
       });     

       $("#btn").click(function(){ 
        var output = '<li id="123"><a href="#">Test Account</a></li>'; 
        $("#acclist").append(output).listview('refresh'); 
       });     
      }); 

      $(document).on("pagebeforeshow", "#accountdetail", function(e) { 
       $("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join("")); 
      }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="accountpage"> 
      <div data-role="content"> 
       <button id="btn">Add</button> 
       <br/> 
       <ul id="acclist" data-role="listview"></ul> 
      </div> 
     </div> 

     <div data-role="page" id="accountdetail"> 
      <div data-role="content"> 
       <div id="details"></div> 
      </div> 
     </div> 
    </body>

출처

2013-07-03 MS88

새로운 생성 된 DOM 이벤트를받지 못하고있다, 그래서 당신이해야 할 것입니다 뭔가 같은 :

$('li').live('click',function(){ 
    alert($(this).attr('id'))); 
});

출처

2013-07-03 08:44:12

$ ("#의 acclist 리") 살 ("클릭", 기능 (전자) {...}).; 그게 ... 고마워! – MS88

당신이에 직접 추가하는 클릭 이벤트를 추가 할 때 요소. 나중에 요소를 추가하면 이벤트 위임을 사용하지 않는 한 명시 적으로 지정하지 않으면 이벤트 핸들러가 첨부되지 않습니다. $ .on()을 사용하여 부모 개체에 이벤트 처리기를 연결합니다. 그러면 해당 하위 항목에 추가 할 모든 하위 항목에 이벤트 hanler가 자동으로 연결됩니다.

는 <ul> 요소에 이벤트 처리기를 추가

  $("#acclist").on("click","li", function(e){ 
       e.preventDefault(); 
       passDataObject.selectedId = this.id; 
       $.mobile.changePage('#accountdetail'); 
      });

출처

2013-07-03 08:45:08

그러면 li이 아닌 ul 요소의 ID를 얻습니다. live() 메서드는 문제를 해결합니다! 덕분에 – MS88

죄송합니다 - 선택기를 놓쳤습니다. 이제 수정되었습니다. –

jquery 동적 목록보기 전달 데이터

답변

관련 문제