JQuery 테이블에 행 추가 및 이벤트 마지막 항목에만 바인딩

목록의 마지막 선택 메뉴에서 선택하면 테이블의 아래쪽에 선택 메뉴의 복사본을 추가하려고합니다. 이 시점에서 나는 테이블의 마지막 선택 메뉴에 동작을 적용하고 싶습니다. 아래 코드는 행에 표를 추가하지만 작업의 바인딩을 성공적으로 해제하지 못하기 때문에 결과가 언 바운드 된 후에도 첫 번째 선택 메뉴에 동작이 계속 표시됩니다.JQuery 테이블에 행 추가 및 이벤트 마지막 항목에만 바인딩

자바 스크립트 :

var selectRow; 
$(document).ready(function() { 
    selectRow = $('#selectWrapper').html(); 
    rebindLastSelectBox(); 
}); 

function rebindLastSelectBox() { 
    $('#selectList:last').change(function(e) {   
       $(this).unbind('change'); 
     $('table').append("<tr id='selectWrapper'>" + selectRow + "</tr>"); 
       rebindLastSelectBox(); 
    }); 
};

HTML :

<head> 
    <title>JS Test</title> 
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script> 
    <script src="./js/application.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 

<table> 
    <tr> 
     <td>Title</td><td><input type="text" name="some_name" value="" id="some_name"></td> 
    </tr> 
    <tr id='selectWrapper'> 
     <td>Items</td><td><select name="items[]" id="selectList" size="1"> 
      <option value="1">Item 1</option> 
      <option value="2">Item 2</option> 
     </select></td> 
    </tr> 
</table> 
</body>

모든 제안을 기꺼이 받았다!

아담

출처

2009-08-20 apchester

나는 코드에 어떤 일이 일어나고 있는지 정말로 알지 못합니다. "#selectList : last"는 어떤 의미가 있습니까? 어떻게 "마지막"ID를 가질 수 있습니까? –

그는 행을 복사하고 있으므로 두 ID가 유효하지 않습니다 물론 유효하지 않습니다 – redsquare

업데이트 된 아담 ... 내 대답을 참조하십시오 – redsquare

작업을하려면 tr의 클래스와 select를 변경하십시오. js를 향상시킬 수는 있지만 작업을 먼저 수행 할 수 있습니다.

<head> 
    <title>JS Test</title> 
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script> 
    <script src="./js/application.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 

<table> 
    <tr> 
     <td>Title</td><td><input type="text" name="some_name" value="" id="some_name"></td> 
    </tr> 
    <tr class='selectWrapper'>  
     <td>Items</td><td><select name="items[]" class="selectList" size="1"> 
       <option value="1">Item 1</option> 
       <option value="2">Item 2</option> 
     </select></td> 
    </tr> 
</table> 
</body> 

var selectRow; 
$(document).ready(function() { 
    selectRow = $('tr.selectWrapper').html(); 
    rebindLastSelectBox(); 
}); 

function rebindLastSelectBox() { 
    $('select.selectList:last').change(function(e) {     
     $(this).unbind('change'); 
     $('table').append("<tr class='selectWrapper'>" + selectRow + "</tr>"); 
     rebindLastSelectBox(); 
    }); 
};

출처

2009-08-20 20:34:24 redsquare

오히려 그 ID를 클래스로 변경 포인터를 주셔서 감사합니다. 그러나 내 ID를 변경 한 후에는 페이지의 동적 업데이트가 표시되지 않습니다. 나는 당신이 자바 스크립트를 어떻게 향상 시킬지보고 싶다. 건배, 아담 – apchester

작품보기 http://pastebin.me/f576b606b1bbc67794a9c8e8dcda9330 – redsquare

JQuery 테이블에 행 추가 및 이벤트 마지막 항목에만 바인딩

답변

관련 문제