此图片为分页，并检查编辑按钮enter image description here上的值
以json格式出现的编辑按钮值时，我对json和ajax仅有一些了解
我的数据库表：
-----------------------------------
sport_id | sport_name
-------------------------------------
1 | Volleyball
2 | Basketball
----------------------------------
table name is:- sports
我的代码就是这样
controller
===========
public function add_sport() {
unset($_POST['gym_account_id']);
if(isset($_POST['sport_id'])){
unset($_POST['sport_id']);
$response = $this->queryData->sportAddData($_POST);
}else{
$sport_id = $_POST['sport_id'];
// alert($sport_id);
$sport_name = array("sport_name" => $_POST['sport_name']);
$response = $this->queryData->sportEditData($sport_name,$sport_id);
}
$this->Sports();
}
model
========
public function sportAddData($data) {
$this->db->insert('sports', $data);
$insert_id = $this->db->insert_id();
return $insert_id;
}
public function sportEditData($sport_name,$sport_id) {
$this->db->where('sport_id', $sport_id);
$this->db->update('sports', $sport_name);
}
view
======
<div class="page-title">
<div class="title_left">
<div class="alert alert-success alert-dismissible fade in" role="alert" style="display: <?php echo (!empty($_GET['success'])) ? 'block' : 'none'; ?>">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Success!</strong> <?php echo $_GET['success']; ?>
</div>
</div>
<div class="title_right">
<div class="col-md-12 col-sm-5 col-xs-12 form-group pull-right top_search" style="text-align: right; margin-bottom: 26px; margin-right: -4px;">
<button type="button" class="btn btn-dark create_sport1">Create</button>
<button type="button" class="btn btn-dark delete_items" >Delete</button>
<button type="button" class="btn btn-dark call_delete" data-toggle="modal" data-target=".bs-example-modal-sm" style="display: none;" >Delete Athlete</button>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row sport_form_block" id="add_sports" style="display: none;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2 class="form_title1">Create New Sport</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form id="demo-form2" method="POST" data-parsley-validate class="form-horizontal form-label-left sport_form">
<?php
$userType = $this->session->userData('userType');
$gymAccountId = $this->session->userData('gym_account_id');
if($userType == 1){
?>
<?php }else{ ?>
<input type="hidden" name="gym_account_id" id="gym_account_id" value="<?php echo $gymAccountId; ?>" />
<?php } ?>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="sport_name">Sport Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="sport_name" name="sport_name" required="required" class="form-control col-md-7 col-xs-12 edit_sportname">
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<input type="hidden" name="sport_id" value="" class="editsportid" id="editsportid" />
<button class="btn btn-primary close_form" data-div="sport_form_block" type="button">Cancel</button>
<button class="btn btn-primary reset_sport_form" type="reset">Reset</button>
<!-- <button type="button" class="btn btn-success submit_athlete1" data-url="<php echo base_url(); ?>athlete/add_athlete" data-table="<php echo base_url(); ?>athlete/get_athlete" data-form="athlete_form" data-div="athlete_form_block">Submit</button>-->
<button type="submit" class="btn btn-success submit_athlete1" data-url="<?php echo base_url(); ?>Index/add_sport" data-table="<?php echo base_url(); ?>sport/get_athlete" data-form="sport_form" data-div="sport_form_block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Sport(s)<small></small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="sport-athlete-datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap bulk_action" cellspacing="0" width="100%">
<thead>
<tr>
<th class="no-sort" style="width: 30px;" ><input type="checkbox" id="check-all" class="flat check_all" data-check="athlete_list"></th>
<th>Id</th>
<th>Sport</th>
<th class="no-sort" style="width: 50px;" >Edit</th>
</tr>
</thead>
<tbody>
<?php foreach ($data['athletes'] as $key => $value) { ?>
<tr>
<!-- <td><input type="checkbox" id="<php echo $value['athlete_id']; ?>" class="flat athlete_list multiple_delete"></td>-->
<td><input type="checkbox" id="<?php echo $value['sport_id']; ?>" class="flat athlete_list multiple_delete"></td>
<td><?php echo $value['sport_id']; ?></td>
<td><?php echo $value['sport_name']; ?></td>
<!--<td><a href="#/pencil-square-o" class="edit_athlete option_icon" data-json='<php echo json_encode($value, TRUE); ?>' data-block="athlete_form_block" data-form="athlete_form" ><i class="fa fa-edit"></i></a></td>-->
<td><button class="edit_sport option_icon" data-json='<?php echo $value['sport_id'] . ',' . $value['sport_name'] ?>' data-block="sport_form_block" data-form="sport_form" ><i class="fa fa-edit"></i></button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
js
==
$('.edit_sport').on('click', function (e) {
//$('.edit_sport').on('click', function (e) {
$('#add_sports').slideDown();
id = $(this).attr("data-json");
var arr = id.split(',');
$('.edit_sportname').val(arr[1]);
$('.editsportid').val(arr[0]);
alert(arr);
console.log(arr);
$('#function').val("update");
$('.form_title1').html('Edit Sports');
$('.' + $(this).data("block")).show();
$("html, body").animate({scrollTop: 0}, "slow");
});
答案 0 :(得分：0)
因为使用onclick绑定了按钮上的事件，该事件将不适用于通过ajax调用添加到DOM的新元素。您可以使用委托或附加事件。