通話雙方在負載和點擊同一個jQuery函數

在我的「更新」頁面我經常需要調用同一個jQuery函數都在頁面加載和一些複選框的點擊，大多是這樣的：通話雙方在負載和點擊同一個jQuery函數

function foo(){ 
    if ($('#mycheckbox').is(':checked')){ 
     $('.myclass').hide(); 
    } else { 
     $('.myclass').show(); 
    } 
} 

$(function() { 

    foo(); // this is launched on load 
    $('#mycheckbox').click(function(){ 
     foo(); // this is launched on checkbox click 
    }) 

});

在頁面加載時，可以選中或不選擇取決於數據庫值的複選框：這就是爲什麼我需要啓動foo（）;在負載

嗯，這工作正常，但我總是想知道如果...有一個更好或最優雅的解決方案？在此先感謝

來源

2011-11-23 Ivan

其中一種方法（假設您的站點包含服務器端代碼組件）將根據需要在服務器端渲染中隱藏/顯示該項目。這意味着在頁面加載時沒有屏幕「閃爍」（無論是輕微的）。

來源

2011-11-23 15:41:45 Paddy

您可以使用trigger()函數立即觸發事件;

$('#mycheckbox').click(function(){ 
    if ($('#mycheckbox').is(':checked')){ 
     $('.myclass').hide(); 
    } else { 
     $('.myclass').show(); 
    } 
}).trigger('click');

但是，請記住，這也將引發你的元素上定義的任何其他點擊處理程序。或者，你可以寫一個小小的jQuery插件來爲你做;

jQuery.fn.nowAndOn = function (event, handler) { 
    handler(); 

    this.bind(event, handler); 

    return this; // support chaining 
};

而且你會使用它;

$(function() { 
    $('#mycheckbox').nowAndOn('click', function(){ 
     if ($('#mycheckbox').is(':checked')){ 
      $('.myclass').hide(); 
     } else { 
      $('.myclass').show(); 
     } 
    }); 
});

然而，這個問題是點擊處理程序中，通常this是當前元素;而通過調用handler();就像我們在這裏做的那樣，this會指向window（這與您發佈的確切代碼段無關，因爲您不使用this）。

要修復this，我們可以增加一些複雜度，並使用Function.call方法來設置值this;

jQuery.fn.nowAndOn = function (event, handler) { 
    this.each(function() { 
     handler.call(this); 
    }); 

    this.bind(event, handler); 

    return this; 
};

但是，你仍然有一個問題，如果你依賴傳遞的事件對象...

來源

2011-11-23 15:41:17 Matt

你能避免二次函數調用函數foo直接綁定到單擊處理程序：

function foo(){ 
    if ($('#mycheckbox').is(':checked')){ 
     $('.myclass').hide(); 
    } else { 
     $('.myclass').show(); 
    } 
} 

$(function() { 
    foo(); // this is launched on load 
    $('#mycheckbox').click(foo) 

});

來源

2011-11-23 15:41:24

你能做的最好的是這樣的：

$(function() { 

    foo(); // this is launched on load 
    $('#mycheckbox').click(function(){ 
     foo(); // this is launched on checkbox click 
    }) 

});

- >

$(function() { 
    foo(); // this is launched on load 
    $('#mycheckbox').click(foo); 

});

來源

2011-11-23 15:41:40 Dogbert

，你唯一能做的事情將是調用foo（）這樣的：

$('#mycheckbox').click(foo);

來源

2011-11-23 15:42:04 Seth

試試這個

$('#mycheckbox').click(function(){ 
    $(this).is(':checked')?$('.myclass').hide():$('.myclass').show(); 
}).click();

來源

2011-11-23 15:44:59 ShankarSangoli

我知道這個問題已經回答過了，但是這是另外一個不錯由於觸發單元上的單擊事件，導致複選框被無意中檢查/取消選中，所以完成OP的問題的方式（尤其是在複選框的情況下）導致複選框被無意中檢查/取消選中：

$('#myCheckbox').bind('click init', function() { 
    $('.myDiv').toggle($('#myCheckbox').is(':checked')); 
}).trigger('init');

此方法還可以避免點擊事件傳播。

來源

2016-01-04 07:08:31 Edward

通話雙方在負載和點擊同一個jQuery函數

回答

相關問題