Функция 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

Надеюсь, это поможет вам:

Поскольку вы не отправляете никакую форму, вам следует изменить тип кнопки с 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

Надеюсь, это сработает, попробуйте добавить событие клика на id отправки

попробуйте использовать

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

Answer 3

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