使用click事件调用方法'trigger'时的复选框值

时间:2010-08-30 16:16:42

标签: jquery

如何在点击事件中获取正确的当前值以通过触发器调用?

HTML:

<input type="checkbox" id="mycheck" />
<br />
<span id="actual-value-inevent"></span>
<br />
<span id="actual-value"></span>
<br />
<button id="view-value">view value</button>
<br />
<button id="call-trigger">call trigger</button>
<br />
<button id="call-trigger-handler">call trigger handler</button>

使用Javascript:

$('#mycheck').bind('click', function(ev) {
    $('#actual-value-inevent').html('value in event : ' + $(this).is(':checked'));
});

$('#view-value').bind('click', function(ev) {
    $('#actual-value').html('value view : ' + $('#mycheck').is(':checked'));
});

$('#call-trigger').bind('click', function(ev) {
    $('#mycheck').trigger('click');
    $('#actual-value').html('value post trigger: ' + $('#mycheck').is(':checked'));
});

$('#call-trigger-handler').bind('click', function(ev) {

    $('#mycheck')[0].checked = !$( "input" )[ 0 ].checked;
    $('#mycheck').triggerHandler('click');

    $('#actual-value').html('value post triggerHandler: ' + $('#mycheck').is(':checked'));

});

如果我调用“触发器('click')”,如果复选框的当前值是预先单击的话。

this blog我找到了解决方案,但我需要解决事件功能中的问题,而不是调用触发器。

example
example with solution

通过覆盖触发器方法的可能解决方案:

​(function($){

    var triggerOverwrite = $.fn.trigger;
    $.fn.trigger = function (eventType, extraParameters) {

        var stringEvent = '';
        if (typeof eventType == 'string')
            stringEvent = eventType;
        else 
            stringEvent = eventType.type;

        if (this.get(0).tagName.toLowerCase() == 'input' 
            && stringEvent == 'click' && $(this).attr('type') == 'checkbox')
        {
            $(this)[0].checked = !$(this)[0].checked;
            return $(this).triggerHandler(stringEvent, extraParameters);
        }

        return triggerOverwrite.apply(this, arguments);

    };


})(jQuery);​

run

1 个答案:

答案 0 :(得分:0)

应用于复选框的click事件在点击进行任何更改之前运行。

因此,在复选框中单击事件执行以下操作:

$('#mycheck').bind('click', function(ev) {
    $('#actual-value-inevent').html('value in event : ' + !$(this).is(':checked'));
});