jquery script is not working on clicking on button

Question

I am trying to get the selected data from table, I am using bootstrap and jquery. After selecting checkbox and click on Add to Cart button I have to get the selected data from table. Below is my code snippet:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
     <title>Test</title>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
     <script type="text/javascript">
     var checkedRows = [];
     $('#eventsTable').on('.bs-checkbox', function (e, row) {
      checkedRows.push({id: row.id, name: row.name, forks: row.forks});
       console.log(checkedRows);
     });
    
     $('#eventsTable').on('uncheck.bs.table', function (e, row) {
       $.each(checkedRows, function(index, value) {
         if (value.id === row.id) {
           checkedRows.splice(index,1);
         }
       });
       console.log(checkedRows);
     });
    
     $("#add_cart").click(function() {
       $("#output").empty();
       console.log(checkedRows);
       $.each(checkedRows, function(index, value) {
         $('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
       });
     });
     </script>
    </head>
    
    <body>
     <div style="position: absolute;bottom: 42px; padding-left:10px;  "> 
      <table id="eventsTable"
           data-toggle="table"
           data-height="300"
           data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
           data-pagination="true"
           data-search="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-toolbar="#toolbar">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="name">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="description">Description</th>
        </tr>
        </thead>
    </table>
    
    <button id="add_cart">Add to card</button>
    <ul id="output"></ul>
    </div>
    </body>
    </html>

When I click on my button none of my jquery functions are calling. I have referred : Getting values of selected table rows in bootstrap using jquery

Kindly help me to resolve this. Thanks in advance.

Do you have any console errors? – The One and Only ChemistryBlob Sep 09 '16 at 13:17 — The One and Only ChemistryBlob, Sep 09 '16 at 13:17

score 4 · Answer 1 · answered Sep 09 '16 at 13:19

The problem is casued by the fact that your js loads before the DOM is ready.

You can do one of two things:

Put your script tag with the event handlers in it before

</body>

Add a document ready event around your code

$(document).ready(function(){
   // your code here
});

score -1 · Accepted Answer · answered Sep 09 '16 at 13:31

-1

Use #add_cart click function like this

$(document).ready(function(){
    $("#add_cart").click(function() {
        $("#output").empty();
        $("tbody tr").each(function() {
            if($(this).hasClass("selected")){
                $('#output').append($('<li>'+$(this).find("td:eq(1)").text()+' | '+$(this).find("td:eq(2)").text()+'</li>'));
            }
        });
    });
});

answered Sep 09 '16 at 13:31

Mani

2,675
2
20
42

Hi Mani, if i check last row of the table getting full dom in output. – user3355101 Sep 13 '16 at 17:55

jquery script is not working on clicking on button

2 Answers2