“ 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文件的JQuery Mobile網站，因此#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 ，它們沒有顯示，這必須表示該函數未觸發。 是否有這種情況不會發生的原因？ 我嘗試了onClick JQuery方法的多種變體。
謝謝編輯： resultsJSONClient對象是（為簡潔起見，我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.logs），所以我還沒有遇到這個問題。 最后，概述了我使用的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>
2 個解決方案
解決方案1
1 2015-03-06 14:04:20
認為我對自己的問題有一個答案。 這是因為我是動態生成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中
解決方案2
0 2015-03-05 18:46:18
onclick事件已正確觸發，請參見： http : //fiddle.jshell.net/bog500/9h8oksnv/
如果您可以提供結果樣本JSONClient，我們可以為您提供幫助
AngularJS按鈕點擊不觸發功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.