Question

具有以下ajax请求：

data = go.Bar(x=dict.keys(), y=dict.values(), name=ver, text=dict.values(), textposition='auto')

layout = go.Layout(barmode='group', hovermode='closest')

html.Div([dcc.Graph(id='main_graph', figure={'data': data, 'layout': layout}
)], style={'width':'70%', 'float':'left'})

html.Div([html.Pre(id='hover')], style={'width':'30%', 'float':'right'})

@app.callback(Output('hover', 'children'), [Input('main_graph', 'hoverData')])
def disp_hover_data(hover_data):
    print(hover_data)

我在ajax响应中得到一个链接，如何创建一个href属性等于该ajax响应的按钮？

Answer 1

您可以使用Template Strings

模板文字是允许嵌入表达式的字符串文字

var input = $(`<a class="btn btn-info" href="${response}" role="button">Link</a>`);

或者您可以使用+运算符并将字符串分成多个部分。

var input = $('<a class="btn btn-info" href="'+15+'"role="button">Link</a>');

Answer 2

您还可以在对象中传递属性，该属性将为您清理字符串，例如转义引号：

$('<a/>', {
   'class': 'btn btn-info',
   href: response,
   role: 'button',
   text: 'Link'
}).appendTo('body');

为响应下面的评论，只需将类似构造的范围传递给append。与下面的示例相比，我从属性对象中删除了text属性，并在随后的append调用中添加了链接文本，以便在文本之前插入图标想要。

如果您想保留text属性，当然可以通过使用prepend添加跨度来实现，但是我认为按所需顺序添加元素在语义上更有意义出现。

$('<a/>', {
   'class': 'btn btn-info',
   href: response,
   role: 'button'
}).append(
   $('<span/>', { 'class': 'glyphicon glyphicon-download' })
).append(' Link')
 .appendTo('body');

Answer 3

尝试以下解决方案：

randomCollection

Answer 4

let response = 'http://google.com';
var input = $('<a class="btn btn-info" href="' + response + '" role="button">Link</a>');
input.appendTo($("body"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在jquery中创建按钮，使其href属性等于ajax响应

4 个答案: