$(.class).click(function(){}) not working

Question

I am facing problem in $(.class).click(function(){}); which is not working with my code.

Can any one help me on this.

My code is:

whenever i click on edit button popup div open but since click event not fire so text boxes in popup not filled due to which i am not able to update the record. Please help me to resolve the issue:

$(document).ready(function(){

    $(".btn-ed").click(function(e) { 
    try{
        var $row = $(this).closest("tr");
        var id = $row.find('td:eq(0)').text();
        var className = $row.find('td:eq(1)').text();
        var schoolName = $row.find('td:eq(2)').text();
        var status = $row.find('td:eq(3)').text();
        $("#txtId").val(id);
        $("#txtClass").val(className);
        $("#txtSchool").val(schoolName);
        $("#ddlStatus").val((status=='Active'?'1':'0'));
    }
    catch(err){alert(err);}
    });
    $("#btnUpdate").click(function() {
                    var id = $('#txtId').val();
                    var status = $("#ddlStatus").val();
                    $.ajax({
                  cache: false,
                              type:"post",
                              url:"updateClass.php",
                              data: {cId: id, cStatus: status},
                              success:function(ret){ 
                                  if(ret=='1')
                                  {
                                    location.reload(true);
                                    window.location="?u=1&#close";
                                  }
                                  else
                                  {
                                    location.reload(true);
                                    window.location="?u=0&#close";
                                  }
                              }

                          });

    });

});
$(document).ready(function(){
    try{
    getClassData();
    var res = GetParameterValues('u');
    var res1='';
    if(res)
    {
        res1 = res.split('#')[0];
        if(res1=='1')
        {
            $("#msg-inf").hide();
            $("#msg-fail").hide();
            $("#msg-sucess").show();
        }
        else
        {
                $("#msg-inf").hide();
                $("#msg-fail").show();
                $("#msg-sucess").hide();
        }
    }
}
catch(er){alert(er);}
     function GetParameterValues(param) {  
            var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
            for (var i = 0; i < url.length; i++) {  
                var urlparam = url[i].split('=');  
                if (urlparam[0] == param) {  
                    return urlparam[1];  
                }  
            }  
        }
    function getClassData(){
        $.ajax({
                cache: false,
                type:"post",
                url:"classdata.php",
                datatype: 'json',
                data: {qry: 'ClassData'},
                success:function(ret){ 
                var jobj = $.parseJSON(ret);
                loadTable(jobj);
                }
        });
    }
    function loadTable(dt){
        try{
        var dLength = dt.length;
        var tableData = '';
        if(dLength > 0){
            for(var i=0;i < dLength; i++){
                tableData += "<tr class='data'><td class='data' width='30px'>"+dt[i].id+"</td><td class='data' width='70px'>"+dt[i].class_name+"</td><td class='data' width='70px'>"+dt[i].school_name+"</td><td class='data' width='60px'>"+(dt[i].is_active=='1'?'Active':'Deacive')+"</td><td class='data' width='70px'><a href='#openModal'><button id='button' class='btn-ed'>Edit</button></a></td></tr>";
            }
            $("#tblClass").append(tableData).show();
        }
        }
        catch(err){alert(err);}
    }
});

and HTML

<body>
<?php
include 'header.php';
?>
<div id="wrapper">
    <?php include 'left-sidebar.php'; ?>
    <div id="rightContent">
    <h3>Classes</h3>
    <div><div class='informational' id="msg-inf">To update status of any class click on Edit button.</div>
         <div class='failure' id="msg-fail" style="display:none;">Class status changing failed due to some error.</div>
         <div class='success' id="msg-sucess" style="display:none;">Class status successfully changed. Reload page to view changes</div>
         </div>
        <table class="data" id="tblClass" style="display:none;">
            <tr class="data">
                <th class="data" width="30px">No</th>
                <th class="data" width="70px">Class Name</th>
                <th class="data" width='70px'>School Name</th>
                <th class="data" width='60px'>Status</th>
                <th class="data" width="70px">Action</th>
            </tr>
            <!--<tr class="data">
                <td class="data" width="30px"><?php echo $row['id'];?></td>
                <td class="data" width="70px"><?php echo $row['class_name'];?></td>
                <td class="data" width="70px"><?php echo $row['school_name'];?></td>
                <td class="data" width="60px"><?php echo $status;?></td>
                <td class="data" width="70px">
                <a href="#openModal"><button id="button" class="btn-ed">Edit</button></a>
                </td>
            </tr>-->
        </table>
    </div>
<div class="clear"></div>
<!-- modal dialog div --->
<div id="openModal" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>

            <h2>Update Class Status</h2>
        <div style="text-align:center;">
        <table width="100%">
            <tr>
                <td>Id</td>
                <td><input type="text" id="txtId" disabled="true"></td>
            </tr>
            <tr>
                <td>Class:</td>
                <td><input type="text" id="txtClass" disabled="true"></td>
            </tr>
            <tr>
                <td>School</td>
                <td><input type="text" id="txtSchool" disabled="true"></td>
            </tr>
            <tr>
                <td>Status</td>
                <td><select id="ddlStatus"><option value="1">Active</option><option value="0">Deactive</option></select></td>
            </tr>
            <tr><td></td>
                <td>
                    <button id="btnUpdate" class="button">Update</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#close" id="btnCancel" class="button">Cancel</a>
                </td>
            </tr>
        </table>
        </div>
    </div>
</div>

Thanks in advance..

What errors do you get in the console? And post the rendered HTML, not the PHP, in your question. The PHP is irrelevant here. — j08691, Feb 03 '16 at 20:40
Whenever i removed second $(document).ready(function(){}); and load data using php it start working due to which i add try catch but could not get any solution as no error catch by try catch — Zen, Feb 03 '16 at 20:50
Please reduce your code sample to what is needed to show the problem, don't dump an entire web page in here and expect people to dig through it to try to figure out what you're asking. — Daniel Beck, Feb 03 '16 at 20:51

trenthaynes · Accepted Answer · 2016-02-03T20:59:17.803

When dynamically adding an element to the DOM, you cannot attach an event handler to it on document.ready. You need to redefine you event handler to the document, and "look" for the element instead.

The handler should be:

$(document).on('click', '.btn-ed', function(e) { 
    try{
        var $row = $(this).closest("tr");
        var id = $row.find('td:eq(0)').text();
        var className = $row.find('td:eq(1)').text();
        var schoolName = $row.find('td:eq(2)').text();
        var status = $row.find('td:eq(3)').text();
        $("#txtId").val(id);
        $("#txtClass").val(className);
        $("#txtSchool").val(schoolName);
        $("#ddlStatus").val((status=='Active'?'1':'0'));
    }
    catch(err){alert(err);}
    });

score -1 · Answer 2 · answered Feb 03 '16 at 20:42

-1

You can try this:

$(document.body).on('click', '.btn-ed' ,function(e){
 // your code
});

answered Feb 03 '16 at 20:42

JTC

3,344
3
28
46

I can handle downvote, just please clarify why... – JTC Feb 03 '16 at 20:45
1

Thanks your solution is working... – Zen Feb 03 '16 at 21:00

$(.class).click(function(){}) not working

2 Answers2