隐藏/显示单选按钮在保存时停止工作答案

【问题标题】：Hide/show radio buttons stop working on save隐藏/显示单选按钮在保存时停止工作
【发布时间】：2015-03-31 20:38:53
【问题描述】：

这是我的情况：我正在开发一个小部件，并且我正在寻找一种方法来隐藏/显示不同的 DIV，以选择一组单选按钮。我找到了正确的代码并根据我的需要进行了调整。唯一的问题是在配置小部件时单击保存后隐藏/显示功能停止工作：S

这是 JS：

jQuery(document).ready(function($) {
    $(document).ready(function() {
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="link_to_image"){
                $(".radio-option").hide();
                $(".linked-image").show();
            }
            if($(this).attr("value")=="link_to_page"){
                $(".radio-option").hide();
                $(".linked-page").show();
            }
        });
    });
});

还有 HTML：

<p>
    <label>Link:</label><br>
    <label>
        <input type="radio" name="link_to" value="link_to_image">
        Link to image
    </label><br>
    <label>
        <input type="radio" name="link_to" value="link_to_page">
        Link to page
    </label>
</p>
<div class="linked-image radio-option">
    <label for="linked_image">Linked image:</label>
    <p>
        Content for linked_image DIV
    </p>
</div>
<div class="linked-page radio-option">
    <label for="linked_page">Linked page:</label>   
    <p>
        Content for linked_page DIV
    </p>
</div>

还有 [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)

你们能帮我解决这个问题吗，伙计们？

【问题讨论】：

如果在单击保存后尝试单击单选按钮时抛出错误，您能否查看开发人员控制台输出？
感谢您的帮助，@JonathanM.Hethey！我自己找到了解决方案。我会把它写下来，这样我就可以将此问题标记为已解决:)

标签： wordpress widget save radio-button show-hide

【解决方案1】：

所以最后我发现问题是通过单击保存按钮启动 AJAX 后 JS 停止工作。

解决方案是在 AJAX 完成工作后调用 JS 函数。为此，我首先必须为 JS 函数命名，然后调用它，然后在 AJAX 停止后再次调用它。像这样：

jQuery(document).ready(function($) {

    function radioButtonShow() {

        if($(this).attr("value")=="link_to_image") {
            $(".radio-option").hide();
            $(".linked-image").show();
        }

        if($(this).attr("value")=="link_to_page") {
            $(".radio-option").hide();
            $(".linked-page").show();
        }

    };

    $('input[type="radio"]').click(radioButtonShow);

    $(document).ajaxStop(function() {

        $('input[type="radio"]').click(radioButtonShow);

    });

});

希望这对某人有用:)

【讨论】：