Question

我正在努力（我希望）简单的问题，但不知何故无法解决它。方案如下：在网站的管理部分中有一种创建新采购订单的形式。在开始时有一个客户端选择按钮：它打开一个带有简单搜索表单的jQueryUI对话框，它生成一个Ajax请求并使用伟大的DataTables显示结果。每个客户端可以有多个送货地址，因此管理员应该能够单击所需的送货地址链接，该链接调用大型窗体中某些隐藏字段的函数selectClient（）设置.val（）并关闭对话框。

这是一个代码片段（只有最重要的片段，我也只在selectClient（）中添加了一个alert（）以获得更好的清晰度）：

<div id="search-user">
    <form id="search-user-form">
        <label for="q">Search phrase:</label>
        <input type="text" id="q" name="q" value="" /><input type="submit" value="Search" />
    </form>

    <div id="search-results"></div>
</div>

<script>
$(document).ready(function(){
    function selectClient(a){
        alert(a);
    }


    $("#search-user-form").submit(function(e){
        e.preventDefault();

        var q=$("#q").val();

        if(q.length > 0){
            $.ajax({
                url: "/service/search-users/",
                data: $("#search-user-form").serialize(),
                type: "GET",
                context: this,
                dataType: 'json'
            }).done(function(data) {

                // Service returns: {"DATA":[], "TOTALROWS":n}
                var totalRows=data.TOTALROWS;

                if(totalRows > 0){
                    $("#search-results").html('<table cellpadding="0" cellspacing="0" border="0" id="sResults"></table>');

                    var oTable = $('#sResults').dataTable( {
                        "bJQueryUI": true,
                        "aoColumns": [
                            { "sTitle": "Box" },
                            { "sTitle": "Name" },
                            { "sTitle": "Email" },
                            { "sTitle": "Company" },
                            { "sTitle": "Billing direction" },
                            { "sTitle": "Shipping directions" }
                        ]
                    } );


                    $.each(data.DATA, function(index, value){
                        var tmpShipping='';
                        $.each(value.shipping, function(i, v){
                                // !!! Those links give a described error:
                                tmpShipping+='<a href="#" onClick="selectClient(' + v.SHIPPINGID +')">(' + v.SHIPPINGDESCRIPTIVENAME + ') ' + v.SHIPPINGADDRESS + ', ' + v.SHIPPINGDISTRICT + ', ' + v.SHIPPINGCITY + '</a><br>';
                        })

                        $('#sResults').dataTable().fnAddData( [
                            value.BOXNUMBER,
                            value.billing.BILLINGNAME + ' ' + value.billing.BILLINGLASTNAME,
                            value.USEREMAIL,
                            value.billing.BILLINGCOMPANYNAME,
                            value.billing.BILLINGADDRESS + ', ' + value.billing.BILLINGDISTRICT + '<br>' + value.billing.BILLINGCITY + ', ' + value.billing.BILLINGREGION,
                            tmpShipping
                        ] );
                    });

                }
                else{
                    $("#search-results").html('Client not found');
                }

                oTable.fnAdjustColumnSizing();

            });
        }

        return false;
    });
});
</script>

问题：tmpShipping变量中创建的链接在点击时会出现错误（在FireBird控制台中看到） selectClient未定义。我在论坛上做了很多搜索，当然还有Google，我发现的唯一解决方案是创建外部资源链接，而不是JS方法。我正在使用DataTables 1.9.4。

我非常感谢指出我正确的方向。

Answer 1

问题是当最终的URL形成时，变量v.SHIPPINGID，v.SHIPPINGDESCRIPTIVENAME等中的值被认为是变量。

!!! Those links give a described error:
                                tmpShipping+='<a href="#" onClick="selectClient(' + v.SHIPPINGID +')">(' + v.SHIPPINGDESCRIPTIVENAME + ') ' + v.SHIPPINGADDRESS + ', ' + v.SHIPPINGDISTRICT + ', ' + v.SHIPPINGCITY + '</a><br>';

尝试修改该行以形成如下URL。

!!! Those links give a described error:
                                tmpShipping+='<a href="#" onClick="selectClient(\'' + v.SHIPPINGID +'\')">(\'' + v.SHIPPINGDESCRIPTIVENAME + '\') ' + v.SHIPPINGADDRESS + ', ' + v.SHIPPINGDISTRICT + ', ' + v.SHIPPINGCITY + '</a><br>';

现在，varibles中的值将作为包含在''。

中的值传递

Answer 2

好吧，我正在回答我自己的问题，以便在类似的情况下提及可能遇到他/她的人：

应该定义“外部”功能，显然，在<{1}}块之外，然后一切都将按预期工作：

$(document).ready(function(){});

jQuery DataTables：在表格单元格中创建调用JS方法的链接

2 个答案: