2016-06-13 1 views
0

"TypeError:$(...)。onは関数ではありません"

私はjquery関数を使用して、チェックされたチェックボックス行にある値のセットをグループ化しました。 checkedRows配列に存在する値がコンソールに表示されず、エラーが表示されます。チェックボックスのチェック値の行の値を印刷してください。

これは

<script> 
    $('#btn').on('click', function() { 
      var checkedRows = []; 
      $(':checkbox:checked').closest('tr').each(function() { 
       checkedRows.push(
        $(this).find('td:gt(0)').map(function() { 
         return $(this).html(); 
        }).get() 
       ); 
      });   
      console.log(checkedRows); 

     }); 
    </script> 

私のJSPページに私のjqueryの関数であるJSP

あなたが使用されているのjQueryのバージョン
<%@page import="java.util.List"%> 
     <%@page import="web.Products"%> 
     <%@page import="java.util.ArrayList"%> 
     <%@page contentType="text/html" pageEncoding="UTF-8"%> 
     <!DOCTYPE html> 
     <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script> 

    <script> 
    $('#btn').on('click', function() { 
      var checkedRows = []; 
      $(':checkbox:checked').closest('tr').each(function() { 
       checkedRows.push(
        $(this).find('td:gt(0)').map(function() { 
         return $(this).html(); 
        }).get() 
       ); 
      });   
      console.log(checkedRows); 

     }); 
    </script> 

    </head> 
     <form name="sform" method="post" action="Save_Products"> 
      <table style="width:40%"> 
       <tr> <th> Brand Name</th> 
        <th> Product Name</th> 
        <th> Description</th> 
       </tr> 
       <tr> 
        <td><% 
     List<Products> pdts = (List<Products>) request.getAttribute("productlist"); 
     if(pdts!=null){ 
     for(Products prod: pdts){ 
     out.println("<input type=\"hidden\" name=\"brand_name\" value=\"" + prod.getBrandname() + "\">"); 
      out.println("<br/>"+prod.getBrandname()); 

      } %> </td> 
      <td><% 
     if(pdts!=null){ 
     for(Products prod: pdts){ 
      out.println("<input type=\"checkbox\" name=\"prod\" checked=\"checked\" value=\"" + prod.getProductname() + "\">" + prod.getProductname()+"<br>"); 
      } } %> </td> 
      <td><% 
      if(pdts!=null){ 
      for(Products prod: pdts){ 
      out.println("<input type=\"text\" name=\"desc\" style=\"width:50px; height:22px\" value=\""+prod.getDesc()+"\"/><br/>"); 
     } 
     } 
     } %> </td> 
     </tr> 
     <br/> 
     <br/> 
     <tr> 
      <td></td> 
      <td align="center"> <input id="btn" type="submit" value="Save" name="save"/> </td></tr> 

      </table> 
      </form> 
     </html> 
+0

クリックスコープ/グローバルの外でcheckedRowsを定義しようとしましたか? – Chay22

+0

jqueryの古いバージョンを使用しているので、 'on'の代わりに 'live'関数を使用してください。エラーは修正されますが、チェックされたチェックボックスの行の値はブラウザのコンソールに表示されません – sound

答えて

0

?古いものはこれを試してみてください:

$('#btn').live('click', function() { 
      var checkedRows = []; 
      $(':checkbox:checked').closest('tr').each(function() { 
       checkedRows.push(
        $(this).find('td:gt(0)').map(function() { 
         return $(this).html(); 
        }).get() 
       ); 
      });   
      console.log(checkedRows); 

     }); 
+0

エラーは解決されました! checkedRowsの値は、私のjquery関数に何か問題がありますか? – sound

+0

テーブルの行の最初の列のhtmlを取得したいですか? yesの場合は、これを試してみてください: $( '#btn')$ {'check:チェックされています。各(関数(){ checkedRows.push( $(この).find( 'TD:最初の')HTML(); ); 。}); にconsole.log(checkedRows); }) ; –

+0

チェックしたすべての商品名チェックボックスのブランド名、商品名、説明を取得する必要があります – sound

関連する問題