javascript - 用jQuery绑定(bind)某行的点击事件-6ren

javascript - 用jQuery绑定(bind)某行的点击事件

转载作者：行者123 更新时间：2023-12-03 12:36:40

25

4

我正在创建一个演示，其中单击按钮会触发行的创建。当我单击生成的行“它在容器内生成另一行”时，我想编辑该行的文本。我们可以在单击编辑按钮时提供更改行文本的选项吗？当您按下按钮后，是否会弹出一些内容，并将文本保存在同一 ID 上？

http://jsfiddle.net/k7zJ4/2/

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/

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

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

关于javascript - 用jQuery绑定(bind)某行的点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23708879/

25

4

0

文章推荐： javascript - 在phonegap中实例化一个新类

文章推荐： javascript - 从服务器到客户端 Node.js 的文件传输

文章推荐： javascript - Jquery Url 拆分并获取中间值

文章推荐： Javascript动态IF正则表达式条件没有eval？

binding - 浅绑定(bind)和深绑定(bind)——这个程序会打印什么？
我不知道该怎么做... function f1() { var x = 10; function f2(fx) { var x; x = 6;
binding - 早期绑定(bind)和后期绑定(bind)有什么区别？
早期绑定(bind)和后期绑定(bind)有什么区别？最佳答案简短的回答是，早期(或静态)绑定(bind)是指编译时绑定(bind)，后期(或动态)绑定(bind)是指运行时绑定(bind)(例如
binding - SwiftUI 我可以使用 Binding get set 自定义绑定(bind)和 @Binding 属性包装器吗？
如何在 SwiftUI View 上使用 Binding(get: { }, set: { }) 自定义绑定(bind)与 @Binding 属性。我已成功使用此自定义绑定(bind)与 @State
binding - 如何处理相关的数据绑定(bind)？
我经常发现自己遇到问题，即控件的两个(相关)值被更新，并且两者都会触发昂贵的操作，或者控件可能会暂时处于不一致的状态。例如，考虑一个数据绑定(bind)，其中两个值 (x,y) 相互减去，最终结果用
binding - wpf窗口宽度不绑定(bind)
我想通过我的 ViewModel 控制我的一个窗口的高度和宽度。这看起来很简单。但没有。它不起作用。它检查 ViewModel 的 Width但不是 Height . 奇怪的是，如果我切换 W
data-binding - UI5中单向绑定(bind)和一次性绑定(bind)的区别
UI5中一次性绑定(bind)和单向绑定(bind)有什么区别？是否有任何用户特定的用例我会使用它们？我无法从文档中获得太多信息。最佳答案单程它的作用:单向数据流。模型数据的变化(例如通过
binding - 方案和浅绑定(bind)
(define make (lambda (x) (lambda (y) (cons x (list y))))) (let ((x 7) (p (make 4))) (cons
binding - 你如何进行语言绑定(bind)？
尽管我或多或少地了解什么是语言绑定(bind)，但我很难理解它们是如何工作的。例如，谁能解释一下如何为 WinAPI 制作 Java 绑定(bind)？最佳答案如果您搜索 Foreign Fun
binding - 为什么我不能在clojure中绑定(bind)+？
谁能解释为什么我可以重新绑定(bind)列表但不能+？ (binding [list vector] (list 1 3)) (binding [list +] (list 1 3)) (bi
binding - 具有命名约定的可见性自动绑定(bind)
我真的很喜欢 Caliburn 和命名约定绑定(bind)，我很惊讶可见性与“CanNAME”约定用于保护 Action 的方式不同。据我所知， BooleanToVisibilityConver
binding - 了解动态绑定(bind)
我了解动态绑定(bind)的实现方式以及静态绑定(bind)和动态绑定(bind)之间的区别，但我只是无法理解动态绑定(bind)的定义。基本上它是一种运行时绑定(bind)类型。最佳答案基本上，
javascript - 绑定(bind)和解除绑定(bind)...此功能完成后如何再次绑定(bind)？
http://jsfiddle.net/3NRsd/ var foo = $("div").bind("click", function() { $("div").animate({"hei
c# - DropDownList binding get Eval()、XPath() 和 Bind() 等数据绑定(bind)方法只能在数据绑定(bind)控件异常的上下文中使用
这个问题我快疯了...我有一个用户控件，它有一个用于插入操作的 FormView 和一个用于所有其他操作的 GridView。在这两个控件中，我都有一个 DropDownList，如下所示: '
wpf - 使用 {Binding .} 或 {Binding} 时数据绑定(bind)未更新
我有一个绑定(bind)到 ListBox 的地址的 ObservableCollection。然后在 ItemTemplate 中，我使用 {Binding .} 绑定(bind)到当前地址记录。这
binding - 当图像src绑定(bind)更改时， knockout js淡入淡出转换绑定(bind)处理程序
如果我有以下简单的 js/knockout 代码: .js( View 模型): var image = ko.observable('http://placehold.it/300x150'); 看
data-binding - 绑定(bind)到动态生成的组件/元素的可绑定(bind)属性
我正在 aurelia 上开发一个自定义属性，让用户在输入文本区域时从列表中进行选择。例如，用法将是这样的: 正如您可能注意到的，auto-complete是属性。现在，当我想显示提示时，我想在自定
javascript - 将绑定(bind)函数绑定(bind)和取消绑定(bind)到事件
我正在使用 EventEmitter2作为我的应用程序内部的消息总线。现在我需要绑定(bind)和取消绑定(bind)一些事件处理程序。因为我也希望他们bind将它们添加到给定的上下文中，我最终得到以
javascript - 在通过 bind() 绑定(bind)的函数中使用绑定(bind) this 和函数作用域的 this
我有以下函数调用: $(".selector").on("click", callback.bind(this, param1, param2)); 在我的回调函数中，我想使用绑定(bind)的 th
c# - 使用编译绑定(bind) (x :bind), 为什么我必须调用 Bindings.Update()？
我目前正在试验新的编译绑定(bind)，并且(再次)达到了我在拼图中遗漏了一个小问题:为什么我必须调用 Bindings.Update？直到现在，我还认为实现 INotifyPropertyChang
javascript - `bind.bind` 是什么意思？一种使用 JavaScript bind 的奇怪方式
我正在阅读一本关于编写 JavaScript 框架的书，并找到了这段代码。但是我不明白它是如何工作的，尤其是 bind.bind 的用法？有人知道吗？ var bind = Function.prot

首页

博学

6Ren·AI

商城

javascript - 用jQuery绑定(bind)某行的点击事件

HTML:

JavaScript:

CSS: