用jQuery绑定一行的点击事件答案

【问题标题】：Binding the click event of a row with jQuery用jQuery绑定一行的点击事件
【发布时间】：2014-05-20 11:19:53
【问题描述】：

我正在创建一个演示，其中单击按钮会触发创建行。当我单击生成的行“它在容器内生成另一行”时，我想编辑该行的文本。我们可以在单击编辑按钮时提供更改行文本的选项吗？当你按下它时，它会弹出一些东西，它将文本保存在相同的 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;    
}

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

工作示例：http://jsfiddle.net/Gajotres/k7zJ4/5/

HTML：

<!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;
}

如果你还需要什么，请告诉我。

【讨论】：