帶重定向的JavaScript確認框

Question

我需要請用戶確認刪除他的帖子。 我使用jQuery的Confirm函數對其進行了管理，但我想創建一個具有更多自定義選項的覆蓋框，並且在瀏覽網絡后提出了以下建議：

信息：有問題的CMS是Wordpress

所以首先主題：index.php：

<li class="EditDel">
    <?php u_delete_post_link('Delete', '', ''); ?>
</li>

PHP功能：

function u_delete_post_link($link = 'Delete This', $before = '', $after = '') {
    global $post;

    $message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
    $delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
    $htmllink = "<a href='' onclick = \" u_ask_go('".$message."','".$delLink."' ) \"/>".$link."</a>";
    echo $before . $htmllink . $after;
}

現在針對實際問題，上面的鏈接使用消息和鏈接觸發js函數：

function u_ask_go(msg,link)
{   
    u_confirm(msg,link, function () {
        window.location.href = arguments[0];
    });
}

和u_confirm函數：

function u_confirm(message, link, callback) {
    jQuery('#confirm').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%",],
        overlayId: 'confirm-overlay',
        containerId: 'confirm-container', 
        onShow: function (dialog) {
            var modal = this;

            modal.link = link;

            //console.log(modal.link);

            jQuery('.message', dialog.data[0]).append(message);


            // if the user clicks "yes"
            jQuery('.yes', dialog.data[0]).click(function () {
                // call the callback

                if (jQuery.isFunction(callback)) {
                    //console.log(modal.link);
                    callback.apply(modal.link);
                }
                // close the dialog
                modal.close(); // or $.modal.close();
            });
        }
    });
}

問題1：回調函數不觸發

問題2：對話框折疊並且鏈接在沒有用戶按下任何內容的情況下執行

觀察：在附加模態div之前，鏈接變量是可見的，但對話框中的函數中不可見，是的按鈕似乎不可見

希望有人能幫忙

編輯（HTML積累）：

    <!-- modal content -->
    <div id='confirm'>
        <div class='header'><span>Confirm</span></div>
        <div class='message'></div>
        <div class='buttons'>
            <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
    </div>
    </div>
    <!-- preload images -->
    <div style='display:none'>
        <img src='img/confirm/header.gif' alt='' />
        <img src='img/confirm/button.gif' alt='' />
    </div>

編輯2：

echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.js');
echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.simplemodal.js', array("jquery"));
echo wp_enqueue_script('confirmtest', $blogroot.'/js/confirmtest.js', array("jquery"));

Answer 1

最好的做法是不要將函數放在onClick =“”屬性中，應該像這樣使用jQuery調用函數，並將變量存儲在自定義數據屬性中（信息在此處 ）

jQuery的：

$('a#confirmDelete').live('click', function(e) {

    // Prevent default
    e.preventDefault();

    var msg = $(this).attr('data-message');
    var link = $(this).attr('data-del-link');

    u_confirm(msg,link, function () {
        window.location.href = arguments[0];
    });
});

HTML：

function u_delete_post_link($link = 'Delete This', $before = '', $after = '') {
    global $post;

    $message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
    $delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
    $htmllink = "<a href="#" id="confirmDelete" data-message="' . $message . '" data-del-link="' . $delLink . '" />".$link."</a>";
    echo $before . $htmllink . $after;
}

Answer 2

好的，讓它正常工作再次感謝Coulton向我指出正確的方向。 但僅出於完成答案的意思：

1. 我必須以正確的方式將腳本包含在functions.php文件中，而不要包含標頭（ 注意：每個腳本的第一個參數都需要有所不同，這就是為什么它首先沒有正確加載的原因）：

   回聲wp_enqueue_script（'jquery'，$ blogroot。'/ js / jquery.js'）; 回聲wp_enqueue_script（'simplemodal'，$ blogroot。'/ js / jquery.simplemodal.js'，array（“ jquery”）））; 回聲wp_enqueue_script（'confirmtest'，$ blogroot。'/ js / confirmtest.js'，array（“ jquery”）））;

2. 在我的情況下，以下兩行無效：

   var msg = $（this）.attr（'data-message'）;

   var link = $（this）.attr（'data-del-link'）;

不得不用這個替換它們：

var msg = jQuery(this).attr('data-message');
var link = jQuery(this).attr('data-del-link');