點擊事件觸發之前，我可以按下按鈕確認

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>

確定，所以當我點擊刪除應該有一個確認彈出框，詢問是或否刪除帖子之前。問題是當我點擊刪除它只是選擇是自己沒有我得到機會點擊它或沒有。我不知道它是否與我的html頁面中的其他按鈕衝突。

來源

2016-08-22 Lee

它工作正常的我。在你的問題中，你錯過了''。我糾正了在製作堆棧片段時，原始頁面中是否存在該錯誤？ – Barmar

我想把它放在一個動態生成的輸入字段使用jQuery。確認用戶是否要刪除該字段 – Lee

請參閱http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar

其實你的邏輯工作正常，你的代碼問題是你立即關閉了#dialogoverlay，而#dialogbox在外面，你應該把它嵌入到裏面，這是因爲它推動了帖子以及在#dialogbox下來因爲覆蓋高度一樣充滿窗口的高度

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>

來源

2016-08-22 07:04:28

將您的代碼放在一個堆棧片段中而不是codepen – Barmar

@Barmar ，謝謝你，這只是我還在寫 –

它不工作我試過一切，但它繼續選擇是當我加載它，我不知道爲什麼。 – Lee

該代碼適用於我。但確認信息出現在頁面的末尾。

嘗試改變

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

與

dialogoverlay.style.height = "50px";

，你會看到它的工作原理。

來源

2016-08-22 07:04:49 Alberto

您的代碼在代碼片段中工作正常，問題出在您需要使用的CSS位置：絕對代表「dialogoverlay」和「dialogbox」。

來源

2016-08-22 07:06:46

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

現在使用jQuery getAlert

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

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

來源

2016-08-22 07:10:55 DBB

我用你的代碼和它的工作正常，但我想用我的自定義代碼 – Lee

點擊事件觸發之前，我可以按下按鈕確認

回答

相關問題