Javascript无法获取数据ID

Question

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

出于某种原因，我无法让我的data-id被我的脚本接收。 那么当我点击“是”以删除它时会发生什么事情会将我发送到http://localhost/codeigniter/cms-1/admin/catalog/information/delete/但是应该选择数据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;?>

Answer 1

编辑：试试这个：

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

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