javascript - pjax 成功后仅通过单击特定输入显示消息

Question

我有一个表单，当对任何 radio input 进行任何更改时提交。

在表单中，我有两个不同的 radio 组。我正在尝试在 pjax:start 上的 #message 上输出一条消息，当来自 group2 的任何 radio 时> 被触发。

<form id="myForm">
    <input type="radio" name="group1" val="ga_1_1">
    <input type="radio" name="group1" val="ga_1_2">

    <input type="radio" name="group2" val="ga_2_1">
    <input type="radio" name="group2" val="ga_2_2">
</form>

<span id="message"></span>

这是我的简单方法:

$('input[name="group2"]').on('change', function(){
   $(document).on('pjax:start', function() {
     $('#message').text( 'Loading...' );
   });

   $(document).on('ready pjax:success', function() {
     $('#message').text( 'Loaded' );
   });
});

问题是即使我点击 radio group1 也会触发消息。

Answer 1

您有正确的选择器，无需更改它，您可以使用 $.pjax直接回调:

$('input[name="group2"]').on('change', function(){
    $.pjax({
        url: '/url',
        container: '#container',
        beforeSend: function(){
            $('#message').text( 'Loading...' );
        },
        complete: function(){
            $('#message').text( 'Loaded' );
        }
    });
});

或者您也可以发出回调并使用 send & complete相反，如果您按照 Official Documentation 中的说明进行加载，则最好:

pjax:send & pjax:complete are a good pair of events to use if you are implementing a loading indicator

$(function(){
    $('input[name="group2"]').on('change', function(){
       $.pjax({url: "/url", container: '#container'})
    });

    $(document).on('pjax:send', function() {
        $('#message').text( 'Loading...' );
    })
    $(document).on('pjax:complete', function() {
        $('#message').text( 'Loaded' );
    })
})

注意:不需要 ready回调，因为它会初始化你的 #message与 Loaded当页面在任何 $.pjax 之前加载时请求。

看看 best way to implement an overlay with pjax .

希望这对您有所帮助。