Question

我在$(.class).click(function(){});面临的问题与我的代码无关。

任何人都可以帮助我。

我的代码是：

每当我点击编辑按钮弹出div打开但由于点击事件没有激活，弹出窗口中的文本框未填充，因为我无法更新记录。请帮我解决这个问题：

$(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);}
    }
});

和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>

提前致谢..

Answer 1

在向DOM动态添加元素时，无法在document.ready上附加事件处理程序。您需要将事件处理程序重新定义为文档，并且＆＃34;看起来＆＃34;而不是元素。

处理程序应为：

$(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);}
    });

Answer 2

你可以试试这个：

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

$（。class）.click（function（）{}）无效

2 个答案: