.click() 返回值两次

Question

我正在尝试将 jQuery 对话框中输入的一些值插入到文本区域。第一个 .click() 插入一次值，但是当我重新打开对话框并再次插入数据时，它返回了两次。这是代码..

<div id="pf-popup-content" class="pf-popup-content sc-popup">
    <div class="sc-popup-wrapper">
        <h3 class="popuph3">Configure Portfolio</h3>
        <table class="sc-ct-pop">
            <tbody>
                <tr><td><label for="pf-width-select">Width</label></td><td>: <select id="pf-width-select"><option value="fullwidth">Full Width</option><option value="boxed">Boxed</option></select><span class="pop-desc">The width of the portfolio section.</span></td></tr>
                <tr><td><label for="pf-cat-select">Category</label></td><td>: <?php wp_dropdown_categories( 'show_option_all=All&taxonomy=portfolio_cats&show_count=0&hierarchical=1&id=pf-cat-select&name=pf-cat-select' ); ?><span class="pop-desc">The Portfolio category to fetch the items.</span></td></tr>
                <tr><td><label for="pf-num-select">Number</label></td><td>: <input id="pf-num-select" name="pf-num-select" type="text" value="6" size="2"><span class="pop-desc">The number of portfolio items to fetch.</span></td></tr>
                <tr><td><label for="pf-overlay-select">Overlay Color</label></td><td>: <input id="pf-overlay-select" class="color-picker" name="pf-overlay-select" type="text" value="rgba(166, 0, 0, .65)"><span class="pop-desc">Overlay color on mouse hover on portfolio items.</span></td></tr>
                <tr><td><label for="pf-popup-select">Popup</label></td><td>: <select id="pf-popup-select"><option value="yes">Yes</option><option value="no">No</option></select><span class="pop-desc">Choose wheather to open the portfolio items in a popup or link them directly to their respective page.</span></td></tr>
                <tr><td><label for="pf-padding-top">Top Padding</label></td><td>: <input type="text" id="pf-paddingtop" class="pf-paddingtop" value="0" size="5">px<span class="pop-desc">The gap (in pixels) at the top of this portfolio section.</span></td></tr>
                <tr><td><label for="pf-padding-bottom">Bottom Padding</label></td><td>: <input type="text" id="pf-paddingbtm" class="pf-paddingbtm" value="0" size="5">px<span class="pop-desc">The gap (in pixels) at the bottom of this portfolio section.</span></td></tr>
            </tbody>
        </table>
        <div class="sc-pop-buttons">
            <input type="button" id="pf_insert_btn" value="Insert To Post" class="sc-insert button button-primary button-large"/>
            <input type="button" id="pf_close_btn" value="Cancel" class="sc-insert button button-secondary button-large"/>
        </div>
    </div>
</div>

而且，jQuery

$(".pf-popup").click(function() {
    $('#pf-popup-content').dialog({
        dialogClass: 'sc-popup-box',
        modal: true,
        open: function( event, ui ) {
            $( "#pf_insert_btn" ).click(function(event) {
                event.stopPropagation();
                event.preventDefault();
                var width = $("#pf-width-select").val();
                var cat = $("#pf-cat-select").val();
                var num = $("#pf-num-select").val();
                var overlay = $("#pf-overlay-select").val();
                var popup = $("#pf-popup-select").val();
                var pdt = $("#pf-paddingtop").val();
                var pdb = $("#pf-paddingbtm").val();

                code = '[portfolio width="'+ width +'" cat="'+ cat +'" num="'+ num +'" overlay="'+ overlay +'" popup="'+ popup +'" pdt="'+ pdt +'" pdb="'+ pdb +'"]';

                if ( jQuery('#wp-content-wrap').hasClass('tmce-active') ){
                    tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, code );
                } else if ( jQuery('#wp-content-wrap').hasClass('html-active') ) {
                    content =  jQuery('#content').val();
                    jQuery('#content').val( content + code );
                }

                $('#pf-popup-content').dialog( 'close' );                   
            });
            $( "#pf_close_btn" ).click(function() {
                $('#pf-popup-content').dialog( 'close' );
            });
        },
        close: function( event, ui ) {
            delete code;
            $(this).dialog('destroy');
        },
    });
});

我做了一个JSFiddle to replicate the issue。请检查。
代码有什么问题？

Answer 1

您的问题是多次创建按钮的绑定。即每次打开对话框时。将该代码移到函数之外。

DEMO

$("#pf_insert_btn").on('click',function (event) {
    event.stopPropagation();
    event.preventDefault();
    var width = $("#pf-width-select").val();
    var cat = $("#pf-cat-select").val();
    var num = $("#pf-num-select").val();
    var overlay = $("#pf-overlay-select").val();
    var popup = $("#pf-popup-select").val();
    var pdt = $("#pf-paddingtop").val();
    var pdb = $("#pf-paddingbtm").val();

    code = '[portfolio width="' + width + '" cat="' + cat + '" num="' + num + '" overlay="' + overlay + '" popup="' + popup + '" pdt="' + pdt + '" pdb="' + pdb + '"]';

    content = jQuery('#putcontent').val();
    jQuery('#putcontent').val(content + code);
    $('#pf-popup-content').dialog('close');
});
$("#pf_insert_btn").on('click',function () {
    $('#pf-popup-content').dialog('close');
});

$(".pf-popup").on('click',function () {
    $('#pf-popup-content').dialog({
        dialogClass: 'sc-popup-box',
        modal: true,
        open: function (event, ui) {
            $('.ui-widget-overlay').addClass('sc-pop-overlay');
        },
        close: function (event, ui) {
            delete code;
            $(this).dialog('destroy');
        }
    });
});

Answer 2

我可能发现了错误：您绑定的点击事件比必要的多，只需删除旧的：

$( "#pf_insert_btn" ).off("click").on('click', function(event) {

您更新的 Fiddle 和工作代码。

Answer 3

    $(".pf-popup").click(function () {

    $('#pf-popup-content').dialog({
        dialogClass: 'sc-popup-box',
        modal: true,
        open: function (event, ui) {
            //$('.sc-popup-box').removeAttr('style');
            //$('#pf-popup-content').removeAttr('style').css('display', 'block');
            $('.ui-widget-overlay').addClass('sc-pop-overlay');
            $("#pf_insert_btn").click(function (event) {
                event.stopPropagation();
                event.preventDefault();

                var width = $("#pf-width-select").val();
                var cat = $("#pf-cat-select").val();
                var num = $("#pf-num-select").val();
                var overlay = $("#pf-overlay-select").val();
                var popup = $("#pf-popup-select").val();
                var pdt = $("#pf-paddingtop").val();
                var pdb = $("#pf-paddingbtm").val();

                code = '[portfolio width="' + width + '" cat="' + cat + '" num="' + num + '" overlay="' + overlay + '" popup="' + popup + '" pdt="' + pdt + '" pdb="' + pdb + '"]';

                //content = jQuery('#putcontent').val();

                jQuery('#putcontent').val(code);

                $('#pf-popup-content').dialog('close');

            });
            $("#pf_close_btn").click(function () {
                $('#pf-popup-content').dialog('close');
            });
        },
        close: function () {
            delete code;
            $(this).dialog('destroy');
        },
    });
});

只需删除“content = jQuery('#putcontent').val();” 这行 content = jQuery('#putcontent').val() 是做什么用的？

将jQuery('#content').val( content + code );改为jQuery('#putcontent').val(code);

.click() 返回值两次

.click() Returning The Value Twice

jquery

jquery-ui-dialog