在 jquery 中，调用用户定义的函数在 google chrome 中有效，但在 mozilla 中无效

Question

我试图在 ajax 调用之后在 jquery 中调用用户定义的函数，

需要调用的函数：downloadCurrentKey()

我的要求是点击“generate_billing_key”后，函数downloadCurrentKey()应该自动调用，当我点击标签时，那个时候也应该调用函数。

它在 google chrome 中运行良好，但在 Mozilla Firefox 中却不行。

以下是js代码，请指导。

    $(document).on('click', '#generate_billing_key', function(){
    var url = $('#hdGenerateBillingKeyPair').val();


    $.post(url, {


    }, function (data) {

        var obj = JSON.parse(data);
        content="<label id='btn_download_billing_key'>
                      Click here to download key</label>";;

        $("#newKeyDiv").html(content);
        downloadCurrentKey();
    });
});


$(document).on('click', '#btn_download_billing_key', function(){
    downloadCurrentKey();
});

function downloadCurrentKey(){
    var url=$('#hdDownloadBillingKeyPath').val();
        my_form=document.createElement('FORM');
        my_form.name='myForm';
        my_form.method='POST';
        my_form.action=url;
        my_form.submit();
}

url的代码如下

/**
 * @Route("/downloadBillingKey",name="download_billing_key")
 * @Template()
 */
public function downloadBillingKeyAction(Request $request) {
    $file_name="key";
    $file_content="";

    header("Content-type: plain/text");
    header("Content-Disposition: attachment; filename=$file_name.txt");
    header("Pragma: no-cache");
    header("Expires: 0");
    echo $file_content;
    die;
}

谢谢。

Answer 1

通过这种方式，我得到了解决方案。

-从js文件中删除函数downloadCurrentKey()

-在twig文件中添加了一个表单（而不是调用上面的函数，我调用了这个添加函数的提交事件）

-控制器中的代码保持不变。

js 代码

 $(document).on('click', '#generate_billing_key', function(){
            var url = $('#hdGenerateBillingKeyPair').val();

            $.post(url, {

            }, function (data) {

            var obj = JSON.parse(data);
           content="<label id='btn_download_billing_key'>
                      Click here to download key</label>";;

                 $("#newKeyDiv").html(content);
                $("#downloadFile").submit();
            });
        });    
    });


$(document).on('click', '#btn_download_billing_key', function(){
    $("#downloadFile").submit();
});

树枝代码

<form method="post" action="{{ path('download_billing_key') }}" id="downloadFile" />
</form>

Answer 2

你没有发布你所有的代码，不是吗？

我之所以这么说，是因为我试图在这里模拟您的代码，并且只有在我这样做时它才有效：

在你的例子中，你发布的 js 代码什么都没有。

var obj = JSON.parse(data); 之后的所有内容（如 $("#newKeyDiv").html(content) 仅在存在要解析的数据时出现。

在这一行content="<label id='btn_download_billing_key'>Click here to download key</label>";; 上有两个;

也许最重要的是，也许您应该在页面中附加表单。试试这个：

function downloadCurrentKey(){
    var url=$('#hdDownloadBillingKeyPath').val();

    // Get the element that will recive the form
    my_tag=document.getElementById("someID");

    my_form=document.createElement('FORM');

    // Append the form in the page before you post
    my_tag.appendChild(my_form); 

    my_form.name='myForm';
    my_form.method='POST';
    my_form.action=url;
    my_form.submit();
}

您的页面必须包含以下内容：

<p id="someID"></p>

希望对你有所帮助。