Javascript无法获取data-id

Javascript un-able to get data-id

本文关键字:data-id 获取 Javascript      更新时间:2023-09-26

在我的codeigniter项目中,我创建了一个模型,当用户可以删除页面时,但在他或她这样做之前,它会弹出一个警告引导模态。

由于某些原因,我不能让我的data-id得到我的脚本。那么,当我点击yes来删除时它会将我发送到http://localhost/codeigniter/cms-1/admin/catalog/information/delete/但应该会拾取data-id并在删除后添加它例如http://localhost/codeigniter/cms-1/admin/catalog/information/delete/2

问题:为什么脚本不检测和抓取我的数据id,并将其添加到url时点击是模态?

我认为这部分工作不正确

removeBtn.attr('href', removeBtn.attr('href').replace(/(&|'?)'d*/, '$1' + id));

脚本

<script type="text/javascript">
$('#modal-from-dom').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|'?)'d*/, '$1' + id));
    $('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});
$('.confirm-delete').on('click', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    $('#modal-from-dom').data('id', id).modal('show');
}); 
</script>

查看data-id为data-id="<?php echo $information['information_id'];?>"的视图

<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<h1 class="panel-title" style="padding-top: 7.5px;"><?php echo $heading_title;?></h1>
</div>
<div class="pull-right">
<a href="<?php echo base_url('admin/catalog/information/add');?>" role="button" class="btn btn-success">Add Information Page</a>
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>Information Title</td>
<td class="text-right">Delete</td>
<td class="text-right">Action</td>
</tr>   
</thead>
<tbody>
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<tr>
    <td><?php echo $information['title'];?></td>
    <td class="text-right">
    <a href="<?php echo $information['delete'];?>" class="btn btn-danger confirm-delete" data-id="<?php echo $information['information_id'];?>">Delete <?php echo $information['title'];?></a>
    </td>
    <td class="text-right">
    <a href="<?php echo $information['edit'];?>" class="btn btn-primary">Edit <?php echo $information['title'];?></a>
    </td>
</tr>
<?php }?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="4">No Results</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">
</div>
</div><!-- .panel .panel-default -->

模态

<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<div class="modal fade" id="modal-from-dom">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
        <p>You are about to delete one track url, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
        <p id="debug-url"></p>
        </div>
        <div class="modal-footer">
        <a href="admin/catalog/information/delete/" class="btn danger">Yes</a>
        <a href="#" data-dismiss="modal" class="btn secondary">No</a>
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php }?>
<?php }?>

全视图

<?php echo $header;?>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<h1 class="panel-title" style="padding-top: 7.5px;"><?php echo $heading_title;?></h1>
</div>
<div class="pull-right">
<a href="<?php echo base_url('admin/catalog/information/add');?>" role="button" class="btn btn-success">Add Information Page</a>
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>Information Title</td>
<td class="text-right">Delete</td>
<td class="text-right">Action</td>
</tr>   
</thead>
<tbody>
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<tr>
    <td><?php echo $information['title'];?></td>
    <td class="text-right">
    <a href="<?php echo $information['delete'];?>" class="btn btn-danger confirm-delete" data-id="<?php echo $information['information_id'];?>">Delete <?php echo $information['title'];?></a>
    </td>
    <td class="text-right">
    <a href="<?php echo $information['edit'];?>" class="btn btn-primary">Edit <?php echo $information['title'];?></a>
    </td>
</tr>
<?php }?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="4">No Results</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">
</div>
</div><!-- .panel .panel-default -->
</div>
</div>
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<div class="modal fade" id="modal-from-dom">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
        <p>You are about to delete one track url, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
        <p id="debug-url"></p>
        </div>
        <div class="modal-footer">
        <a href="admin/catalog/information/delete/" class="btn danger">Yes</a>
        <a href="#" data-dismiss="modal" class="btn secondary">No</a>
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php }?>
<?php }?>
<script type="text/javascript">
$('#modal-from-dom').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|'?)'d*/, '$1' + id));
    $('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});
$('.confirm-delete').on('click', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    $('#modal-from-dom').data('id', id).modal('show');
}); 
</script>
</div>
<?php echo $footer;?>

编辑:试试这个:

<script type="text/javascript">
$('#modal-from-dom').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|'?)'d*/, '$1' + id));
    $('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});
$('.confirm-delete').on('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('data-id');
    $('#modal-from-dom').data('id', id).modal('show');
}); 
</script>

仅在.confirm-delete元素上使用var id = $(this).attr('data-id');