JQuery找不到元素

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（）之后立即调用unsetUploadDonsIndicator。

然后在另一个JS文件中，我有

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

它调用第一个脚本中的函数，但不会取消勾选tickbox。我不确定指针是否正确传递，当在unsetDeployDoneIndicator（）中打印出接收到的对象时，它确实打印出了一个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存在兼容性问题，请对此答案发表评论