jquery ready函數在添加一行後按鈕點擊不起作用

-1

當只有一行時，代碼工作正常。 The dropdownlist are nested，我的意思是第二個下拉值是基於第一個下拉選擇的項目。所以當我添加一行使用addrow（按鈕）。second下拉列表不填充....請。幫我出jquery ready函數在添加一行後按鈕點擊不起作用

<!DOCTYPE html> 
<html>  
<head> 
    <title></title> 
</head> 
<body> 
<table border="1" id="table"> 
<tr><td> 
    <select id="cat"> 
     <option value="c">A</option> 
     <option value="p">B</option> 
     <option value="n">C</option> 
     <option value="k">D</option> 
    </select> 
    </td> 
    <td><select id="item"></select></td> 
</tr> 
</table> 
<INPUT type='button' value='Add Row' onclick="addRow('table')" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    c=new Array('a1','a2','a3'); 
    p=new Array('p1','p2','p3'); 
    n=new Array('n1','n2','n3'); 
    k=new Array('k1','k2','k3'); 
    populateSelect(); 

    $(function() { 
    $('#cat').change(function(){ 
     populateSelect(); 
    }); 
    }); 

    function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 
    eval(cat).forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
    } 
</script> 
<script type="text/javascript"> 

    function addRow(tableID) 
    {  
     //return false; // Prevent page refresh 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
      case 'text': 
       newcell.childNodes[0].value = ''; 
       break; 
      case 'checkbox': 
       newcell.childNodes[0].checked = false; 
       break; 
      case 'select-one': 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 
      } 
     } 
     var frm = document.getElementsByName('leave'); 
     //frm.submit(); // Submit 
     frm.reset(); // Reset 
    } 
</script> 

</body> 
</html>

我已經更新了我的代碼像下面....但仍然沒有加入任何行更

<!DOCTYPE html> 
<html>  
<head> 
    <title></title> 
</head> 
<body> 
<table border="1" id="table"> 
<tr><td> 
    <select id="cat"> 
     <option value="c">A</option> 
     <option value="p">B</option> 
     <option value="n">C</option> 
     <option value="k">D</option> 
    </select> 
    </td> 
    <td><select id="item"></select></td> 
</tr> 
</table> 
<INPUT type='button' value='Add Row' /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    c=new Array('a1','a2','a3'); 
    p=new Array('p1','p2','p3'); 
    n=new Array('n1','n2','n3'); 
    k=new Array('k1','k2','k3'); 

    $('button').on('click',function(){ 
    addRow('table'); 
    $(function() { 
    $('#cat').change(function(){ 
     populateSelect(); 
    }); 
    }); 

    function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 
    eval(cat).forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
    } 
}); 
    populateSelect(); 

    $(function() { 
    $('#cat').change(function(){ 
     populateSelect(); 
    }); 
    }); 

    function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 
    eval(cat).forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
    } 
</script> 
<script type="text/javascript"> 

    function addRow(tableID) 
    {  
     //return false; // Prevent page refresh 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
      case 'text': 
       newcell.childNodes[0].value = ''; 
       break; 
      case 'checkbox': 
       newcell.childNodes[0].checked = false; 
       break; 
      case 'select-one': 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 
      } 
     } 
     //var frm = document.getElementsByName('leave'); 
     //frm.submit(); // Submit 
     //frm.reset(); // Reset 
    } 
</script> 

</body> 
</html>

來源

2015-07-21 Naga Raju Datla

使用'input'取代'INPUT' –

仍然沒有工作 –

試試這個

$('button').on('click',function(){ 
    // code 
});

或

$('body').on('click','button',function(){ 
     // code 
});

click事件使用jQuery

取代你的腳本標籤

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    c=new Array('a1','a2','a3'); 
    p=new Array('p1','p2','p3'); 
    n=new Array('n1','n2','n3'); 
    k=new Array('k1','k2','k3'); 
//specify your button Id like ($"#buttonID") or use class selector $('.buttonclassname') 
    $('button').on('click',function(){ 
    addRow('table'); 
    }); 

    function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 
    eval(cat).forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
    } 
    $('#cat').on('change',function(){ 
    populateSelect(); 
    }); 


    function addRow(tableID) 
    {  
     //return false; // Prevent page refresh 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
      case 'text': 
       newcell.childNodes[0].value = ''; 
       break; 
      case 'checkbox': 
       newcell.childNodes[0].checked = false; 
       break; 
      case 'select-one': 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 
      } 
     } 
     //var frm = document.getElementsByName('leave'); 
     //frm.submit(); // Submit 
     //frm.reset(); // Reset 
    } 
</script>

來源

2015-07-21 11:57:48

在哪裏把這個代碼...我是一個新BIE到jquery ... –

腳本標記和調用你的addrow函數裏面的代碼 –

也刪除onclick事件在html標記 –

jquery ready函數在添加一行後按鈕點擊不起作用

回答

相關問題