Question

我有一个包含以下内容的脚本（仅显示适用的行）

var setUploadDoneIndicator = function(form)
{
    if ($(form).find('[id$=_upload_done_indicator]').is(':checked') == false)
    {
        console.log("Setting indicator");
        $(form).find('[id$=_upload_done_indicator]').trigger('click');
    }
}

var unsetUploadDoneIndicator = function(form)
{
    if ($(form).find('[id$=_upload_done_indicator]').is(':checked') == true)
    {
        console.log("UnSetting indicator");
        $(form).find('[id$=_upload_done_indicator]').trigger('click');
    }
}

$('[id$=_upload_form]').each(function (event)
{
    current_form = this;

    $(this).fileupload(
    {
        done: function (e, data)
        {
            setUploadDoneIndicator(current_form);
        }
    });
}

这会正确选中一个复选框，其目的是侦听另一个JS文件上复选框的选中状态。如果我在此脚本中的setUploadDoneIndicator（）之后立即调用unsetUploadDoneIndicator（），它将取消勾选复选框。

然后在另一个JS文件中

$('#pricing_ab_upload_done_indicator').change(function()
{
    if ($(this).is(':checked'))
    {
        console.log("got checked");
        unsetUploadDoneIndicator($('#pricing_ab_upload_form'));
    }
});

在第一个脚本中调用该函数，但不取消勾选复选框。我不确定指针是否正确传递，当在unsetUploadDoneIndicator（）中打印出接收到的对象时，它确实打印出一个看似正确的JQuery对象，

if ($(form).find('[id$=_upload_done_indicator]').is(':checked')

返回true，但触发器不会发生，所以我不确定该元素是否实际被找到。

如果我使用以下内容更改第二个脚本，则取消选中该框的触发器也不会发生

$('#pricing_ab_upload_done_indicator').change(function()
    {
        if ($(this).is(':checked'))
        {
            console.log("got checked");
            $('#pricing_ab_upload_done_indicator').trigger('click');
        }
    });

为什么触发器不会发生？

Answer 1

更轻松地删除您的功能并使用以下内容：

$('[id$=_upload_form]').each(function (event) {
    current_form = this;

    $(this).fileupload( {
        done: function (e, data) {
            var checkbox = $(current_form).find('[id$=_upload_done_indicator]');

            // Set the opposite value
            checkbox.prop("checked", !checkbox.prop("checked"));
        }
    });
}

避免在同一操作上绑定多个事件。我看到您在复选框上也有.change个事件，这会导致"click"事件触发两次。这将使它看起来什么也没发生。

在旁注中，如果您经常使用相同的选择器（例如代码示例中的$(current_form).find('[id$=_upload_done_indicator]')），最好将其缓存在变量中以提高性能。使用短变量名称而不是重复整个选择器也更容易。

Answer 2

按照@Dark Ashelin的建议，我添加了一个自定义事件。这似乎是实现此类功能的一种更简单，更合理的方式。

在完成上传的第一个脚本中，我有

$(current_form).trigger('event_upload_completed');

在第二个脚本中我有

$('#pricing_ab_upload_form').on('event_upload_completed', function()
{
    console.log("Upload completed");
});

这种方式不需要从第二个脚本回调第一个脚本来重置复选框的状态（它根本不需要虚拟的html元素）

我在最新的Chrome和FireFox以及IE11中对此进行了测试。如果此方法与旧版IE有兼容性问题，请对此答案发表评论

JQuery没有找到元素

2 个答案: