用jQuery绑定一行的click事件 [英] Binding the click event of a row with jQuery
本文介绍了用jQuery绑定一行的click事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个演示，其中单击按钮会触发行的创建.当我单击生成的行它在容器内生成另一行"时，我想编辑该行的文本.我们可以在单击编辑"按钮的同时提供更改行文本的选项吗?当您按完该按钮后，会打开一些弹出窗口，将文本保存到相同的ID?
I am creating a demo in which button clicks trigger the creation of rows. I want to edit the row's text when I click the generated row "it generate another row inside container". Can we give a option to change the text of row while clicking the edit button? It some thing open pop up when your press done it save the text on same id?
function createTestCase(testCaseName, iscreatedFromScript, jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow"><a href="#" style="color: #ffffff!important;">' + testCaseName + '</a><a class="delete deleteTestCase_h"></a><button class="editclass" style="width:200px !important">edit</button ></li>' + '</ul>' + '</div>';
$('#testCaseContainer').append(html);
var elem = document.getElementById('testCaseContainer'); // just to scroll down the line
elem.scrollTop = elem.scrollHeight;
}
推荐答案
工作示例: http://jsfiddle.net/Gajotres/k7zJ4/5/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<div class="contentsubbox" id="testCaseContainer">
</div>
<input type="button" class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;" value="Add Test Case"/>
<div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div data-role="fieldcontain">
<label for="testCaseIDValue">Text Case ID:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase"/>
</div>
<a href="#" data-role="button" id="donePopUp">Done</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#addTestCase', function (e) {
$("#testCaseId").popup("open");
//createTestCase("trdt",false,null);
});
$(document).on('click', '#donePopUp', function (e) {
$("#testCaseId").popup("close")
});
$( "#testCaseId" ).on({
popupafterclose: function() {
if($('#testCaseIDValue').val().length > 0) {
createTestCase($('#testCaseIDValue').val(),false,null);
}
}
});
});
function createTestCase(testCaseName,iscreatedFromScript,jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow"><a href="#" style="color: #ffffff!important;">' + testCaseName + '</a><a class="delete deleteTestCase_h"></a><button class="editclass" style="width:200px !important">edit</button ></li>' + '</ul>' + '</div>';
$('#testCaseContainer').append(html);
var elem = document.getElementById('testCaseContainer'); // just to scroll down the line
elem.scrollTop = elem.scrollHeight;
}
$(document).on('click', '.clickTestCaseRow', function (e) {
var clickId=this.id;
e.stopPropagation();
});
$(document).on('click', '.clickTestCaseRow', function (e) {
var clickId=this.id;
e.stopPropagation();
});
CSS:
#testCaseId {
margin-top: 170px;
width: 400px !important;
margin-left: 150px !important;
}
如果您还有其他需要，请告诉我.
Tell me if you need anything else.
这篇关于用jQuery绑定一行的click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
