Onclick 功能不适用于自定义弹出窗口

Question

我创建了自定义弹出窗口来显示我的记录。

我正在使用 CodeIgniter，我正在从数据库中获取记录并显示在正在工作的视图页面上。

现在我在视图页面中有这样的记录

EmpName EMPID Mobile No.  Status    Action

xyz     122   0012141010  Pending   view archive

mnb     123   0124541021  Pending   view archive

poiu    124   0000000000  Approved  view archive

我正在做的是，当用户点击 " pending" 时，它会要求确认弹出窗口 "Are you sure want to continue?" 如果用户点击 "Later" 按钮，那么弹出窗口将关闭。它不会采取任何行动。到目前为止没有问题。

现在我们来谈谈Sure 按钮。确定按钮不采取任何行动。我不明白为什么它不调用提交操作。即使它在存档上也不起作用。

注意：我不想使用confirm() 或任何alert() 弹出窗口

查看页面

<div class="white_bg pad0 m_b_20">
  <div class="emp_list">
    <div class=" ">
      <?php if (!empty($get_emp_records)) {?>
      <table cellspacing="0" id="tableData">
        <thead>
          <tr>
            <th class="" width="3%"> <input type="checkbox" id="selectall" />
            </th>
            <th class="" width="15%"> EmpName </th>
            <th class="" width="7%"> EMP ID</th>
            <th class="" width="11%"> Mobile No. </th>
            <th class="" width="13%"> Status </th>
            <th class="" width="23%"> Action </th>
          </tr>
        </thead>
        <?php  
            foreach ($get_emp_records as $row)  
            { $encryption_id=base64_encode($this->encryption->encrypt($row->id));//encrpt the id 
        ?>
        <tbody>
          <tr>
            <td width="3%"><input type="checkbox" name="crm" class="crm_select" value="0" /></td>
            <td>
              <?php echo $row->firstname;  echo $row->lastname;?>
            </td>
            <td>
              <?php echo $row->employee_id;?>
            </td>
            <td>
              <?php echo $row->mobileno;?>
            </td>
            <?php if ($row->is_approved == 1): ?>
            <td><a href="javascript:void(0)" class="table_icon approved">Approved</a></td>
            <?php else: ?>
            <td>
              <a href="javascript:void(0)" class="table_icon pending" onclick="approve(this)" data-id="<?=$row->id;?>"> <span>Pending</span></a>
            </td>
            <?php endif; ?>
            <td><a href="<?php echo site_url('Employee_control/get_employee_view?key='.$encryption_id)?>" class="table_icon view">View</a>

              <a href="<?php echo site_url('Employee_control/employee_archive?key='.$encryption_id)?>" class="table_icon archive">Archive</a>
            </td>
          </tr>
          <!--conformation popup-->
          <div class="confirmation_alert" id="popup-<?=$row->id;?>" style="display: none;">
            <div class="opacity"></div>
            <div class="profile_content">
              <div class="profile_header clearfix">
                <a href="javascript:void(0);" class="close_popup " onclick="closePopup(this)" data-id="<?=$row->id;?>"> x </a>
                <div class="profile_name_pic"> Confirmation!!! </div>
                <div class="profile_header_right">
                </div>
              </div>
              <div class="profile_body">
                <div class="row">
                  <div class="col-md-12">
                    <div class="leave_reason">
                      <h3>Are you sure want to continue?</h3>
                    </div>
                  </div>
                </div>
              </div>
              <div class="profile_footer clearfix">
                <button type="submit" class="btn_default submit_btn" id="confirm">Sure</button>
                <button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
              </div>
            </div>
          </div>
        </tbody>
        <?php } ?>
      </table>
      <?php }else{echo "No record found";}?>
    </div>
  </div>
</div>

脚本

var url = "<?php echo base_url();?>";

function approve(obj) {
  var id = $(obj).data('id');
  $("#popup-" + id).show();
  var el = document.getElementById("confirm");
  if (el.addEventListener) {
    el.addEventListener("click", function() {
      //alert("clicked");
      window.location = url + "Employee_control/approved_user?key=" + id;
    });
  }
  return false;
}

function closePopup(obj) {
  var id = $(obj).data('id');
  $("#popup-" + id).hide();
};

Answer 1

希望对您有所帮助：

由于您的 r 没有提交任何表单，您应该将按钮类型从 submit 更改为 button，如下所示：

<div class="profile_footer clearfix"> 
     <button type="button" class="btn_default submit_btn" id="confirm">Sure</button>
     <button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>

你的js代码应该是这样的：

var url="<?php echo base_url();?>";
function approve(obj) 
{ 
    var id = $(obj).data('id'); 
    $("#popup-"+id).show(); 
    $('.submit_btn').on('click',function(e) {
        alert('hi i am working');
        window.location = url+"Employee_control/approved_user?key="+id;
    e.preventDefault();
    });
}
</script>

Answer 2

	$(document).ready(function(){
		var modalConfirm = function(callback){
		  $(".btn-confirm").on("click", function(){
			$("#mi-modal").modal('show');
		  });
		  $("#modal-btn-si").on("click", function(){
			callback(true);
			$("#mi-modal").modal('hide');
		  });
		  
		  $("#modal-btn-no").on("click", function(){
			callback(false);
			$("#mi-modal").modal('hide');
		  });
		};
		modalConfirm(function(confirm){
		  if(confirm){
		   alert('delete works fine');
		  }
		});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type='button' value="delete" class="btn btn-danger btn-confirm">

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
  <div class="modal-dialog modal-sm">
	<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" id="myModalLabel">Do you want to delete?</h4>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="btn btn-warning" id="modal-btn-si"><i class="icon-ok icon-white"></i> Yes</button>
		<button type="button" class="btn btn-primary" id="modal-btn-no"><i class="icon-ban-circle icon-white"></i> No</button>
	  </div>
	</div>
  </div>
</div>

Answer 3

希望它会起作用，尝试在idof submit 上添加点击事件

尝试使用

$('#confirm').click(function()
{
  // do tricks
});