Hide/show 单选按钮在保存时停止工作

Question

这是我的案例：我正在开发一个小部件，我正在寻找一种方法来 hide/show 在选择一组单选按钮时使用不同的 DIV。我找到了正确的代码并根据我的需要进行了调整。唯一的问题是 hide/show 功能在配置小部件时单击保存后停止工作：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/)

伙计们，你能帮帮我吗？

Answer 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);

    });

});

希望这对某些人有用:)

Hide/show 单选按钮在保存时停止工作

Hide/show radio buttons stop working on save

wordpress

widget

save

show-hide

radio-button