click event fires before i can press button to confirm

Question

function deletePost(id) {
  var db_id = id.replace("post_", "");
  // Run Ajax request here to delete post from database
  document.body.removeChild(document.getElementById(id));
}

function CustomConfirmPop() {
  this.render = function(dialog, op, id) {
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById('dialogoverlay');
    var dialogbox = document.getElementById('dialogbox');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH + "px";
    dialogbox.style.left = (winW / 2) - (550 * .5) + "px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";

    document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
    document.getElementById('dialogboxbody').innerHTML = dialog;
    document.getElementById('dialogboxfoot').innerHTML = '<button type="button" onclick="Confirm.yes(\'' + op + '\',\'' + id + '\')">Yes</button> <button onclick="Confirm.no()">No</button>';
  }
  this.no = function() {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
  this.yes = function(op, id) {
    if (op == "delete_post") {
      deletePost(id);
    }
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
}
var Confirm = new CustomConfirmPop();

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<p id="post_1">
  Today is a lovely day ...
  <button onclick="Confirm.render('Delete Post?','delete_post','post_1')">Delete</button>
</p>


<script>
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text

    var r = confirm("You Want to Remove??");
    if (r == true) {
    e.preventDefault(); $(this).parent('div').remove(); x--;
    }
});
});
//how can i use this code and apply my css styling to it becuase this works to some extent?
</script>

ok so when i click delete there should be a confirmation pop up box asking yes or no before deleting the post. The problem is when i click on delete it just select yes off its own without me getting the chance to click it or not. I wonder if its conflicting with the other buttons in my html page.

Answer 1

Actually your logic is working correctly, the problem with your code is that you're closing the #dialogoverlay immediately, while the #dialogbox is outside, you should nest it inside and that's it because it was pushing both the post as well as the #dialogbox down since the overlay height is same as full window height

codePen

HTML:

<div id="dialogoverlay">
  <div id="dialogbox">
    <div>
      <div id="dialogboxhead"></div>
      <div id="dialogboxbody"></div>
      <div id="dialogboxfoot"></div>
    </div>
  </div>
</div>
<p id="post_1">
  Today is a lovely day ...
  <button onclick="Confirm.render('Delete Post?','delete_post','post_1')">Delete</button>
</p>

Answer 2

The code work to me. But the confirmation message appear at the end of the page.

Try to change

dialogoverlay.style.height = winH+"px";

with

dialogoverlay.style.height = "50px";

and you will see it works.

Answer 3

Your code is working fine in the snippet,the problem is with the CSS you need to use position:absolute for "dialogoverlay" and "dialogbox".

Answer 4

<button type="button" class="dlt" >Delete</button>

Now use jquery to getAlert

$(".dlt").click(function(){

var r = confirm("You Want to Remove??");
        if (r == true) {
// your code.
}
});