用于'a href'按钮未触发
On click function for a 'a href' button is not triggering
我有一些HTML，它可以作为另一个页面的链接按钮：
<a href="#breakdownDialog" class="ui-btn" data-icon="arrow-r" data-iconpos="right" id="cvResults">
<h3>First Name</h3>
<span>87%</span>
</a>
请注意，这是一个单独的html文件JQueryMobile站点，因此#breakdownDialog会将用户带到另一个页面。
我尝试创建一个函数，将一些表元素添加到breakdownDialog页面中，该页面引用了以前从服务器端传入的resultsJSONClient对象：
$('#cvResults').click(function(e) {
$('#cvResultsDialog h3').text(resultsJSONClient.profile_json[i].id);
console.log("json profile"+resultsJSONClient.profile_json);
$('#dialogContent').append(function(){
for(var i=0; i<resultsJSONClient.profile_json.length; i++){
return '<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
resultsJSONClient.profile_json[i].title+'"><td>'+
resultsJSONClient.profile_json[i].id+'</td><td align="right">'+
resultsJSONClient.profile_json[i].value+'</td></tr>';
console.log(resultsJSONClient.profile_json[i].id);
}
});
});
我确信该代码中有很多错误，我很乐意调试这些错误，但我首先关心的是如何启动onClick事件。我放入了一些诊断console.log，但它们没有显示，这一定意味着该功能没有触发。为什么没有发生这种事？我已经尝试了onClickJQuery方法的许多变体。
谢谢EDIT:resultsJSONClient对象是（为了简洁起见，我去掉了一些值）：
{ title: 'Name here',
percentage: 63.2,
profile_json:
[ { id: 'Big 5', title: true, value: '' },
{ id: 'Openness', title: true, value: '100%' },
{ id: 'Adventurousness', title: false, value: '98%' },
{ id: 'Artistic interests', title: false, value: '64%' },
{ id: 'Emotionality', title: false, value: '8%' },
.........]}
我知道这已经到达客户端，因为我的ajax调用正确地返回了它。当按下主页上的另一个按钮时会发生这种情况：
$.ajax({
url: '/',
dataType: 'json', //datatype of argument for success function
type: 'POST',
contentType: 'application/x-www-form-urlencoded',//content type being sent to server 'application/json'
data: textInput,
success: function (response) {
$('#resultsList').append('<a href="#breakdownDialog" class="ui-btn" data-icon="arrow-r" data-iconpos="right" id="cvResults"> <h3>' + response.title + '</h3> <span>' + response.percentage +
'%</span></a>');
console.log(response.title + response.percentage);
var resultsJSONClient=response;
},
});
});
我想知道你是否可以像我一样将这个JSON对象传递给另一个JQuery-onClick函数，但由于我的函数似乎甚至没有触发（没有console.log），我还没有遇到这个问题。最后，我使用的HTML结构概述：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
<meta name="viewport" con...>
<link rel="stylesheet" href="css/main.css">
<script src="https.../2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https:/.../jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="https:/.../jquerymobile/1.4.3/jquery.mobile.min.js"> </script>
</head>
<body>
<!--application UI goes here-->
<div data-role="page" id="home">
<div data-role="content">
<img src=...>
<h1>R...</h1>
<div data-role="fieldcontain">
<id="submitForm">
<fieldset>
<textarea id="textArea" required="true" ... name="content"></textarea>
<button class="btn btn-block" type="submit">
Analyse
</button>
</fieldset>
</form>
</div>
<h2>Results</h2>
<ul data-role="listview" id="resultsList" data-inset="true">
</ul>
</div>
</div>
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3>...</span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/pdfExtract.js"></script>
</body>
</html>
我想我自己的问题已经有了答案。这是因为我是动态生成ID标记的，所以在生成标记之前就已经加载了脚本。
我通过在生成id标记的函数中包含onClick函数来解决这个问题，如下所示（这个脚本中还有一些其他错误，但它解决了事件不触发的问题）：
$.ajax({
url: '/',
dataType: 'json', //datatype of argument for success function
type: 'POST',
contentType: 'application/x-www-form-urlencoded',//content type being sent to server 'application/json'
data: textInput,
success: function (response) {
$('#resultsList').append('<a href="#breakdownDialog" data-transition="slidefade" class="ui-btn" data-icon="arrow-r" data-iconpos="right" id="cvResults"> <h3>' + //data-rel="dialog" data-transition="pop"
response.title +
'</h3> <span>' + response.percentage +
'%</span></a>');
console.log(response.title + response.percentage);
var resultsJSONClient=response;
$('#cvResults').click(function(e) {
//e.preventDefault();
console.log("hello");
$('#cvResultsDialog h3').text(resultsJSONClient.profile_json[i].id);
console.log("json profile"+resultsJSONClient.profile_json);
$('#dialogContent').append(function(){
for(var i=0; i<resultsJSONClient.profile_json.length; i++){
return '<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
resultsJSONClient.profile_json[i].title+'"><td>'+
resultsJSONClient.profile_json[i].id+'</td><td align="right">'+
resultsJSONClient.profile_json[i].value+'</td></tr>';
console.log(resultsJSONClient.profile_json[i].id);
}
});
});
},
error: function(jqXHR, textStatus,errorThrown){
jQuery.error(errorThrown);
console.log(errorThrown);
}
});
});
这里的更多信息：如何将onclick事件添加到动态生成的div
onclick事件正确触发，请参阅：http://fiddle.jshell.net/bog500/9h8oksnv/
如果您能提供一个结果样本JSONClient，我们可以帮助您