如何在jquery中将按钮id与绑定值连接起来

时间:2016-08-18 09:34:36

标签: jquery ajax

这是我的div标签

<div id="generate">    
</div>

我动态生成的html具有输入类型按钮控件,我已将其与唯一消息ID绑定,因此我可以在点击时区分按钮ID。

<input type="button" onclick="return GetSelectedRow(this);" class="btn" value="Post" id="b' +<%#Eval("id")%>'"/>

这是详细的代码。

  $(document).ready(function () {
            debugger;
            var generateHere = document.getElementById("generate");
            debugger;
            generateHere.innerHTML = '<div class="card w-post"> <div class="alert alert-danger hide" id="AlertDiv" runat="server"> <asp:Label ID="ErrorMessageLabel" runat="server" CssClass="control-label" Text=""></asp:Label></div><div class="card-body"><textarea class="wp-text auto-size" id="TextBox1" placeholder="Write Something..."></textarea><div class="tab-content p-0"></div><div class="wp-actions clearfix"><div class="wpa-media-list pull-left"></div> <input type="button" onclick="SaveMessageRecord(); return false" class="btn" value="Post" id="btnInsertRecord"/> </div> </div> </div><div id="result"><div id="hello"><div id="Div1"><div class="card w-item"><div class="card-header"> <div class="media"><div class="pull-left"><img class="avatar-img" src="img/profile-pics/ACER.gif" alt=""/></div><div class="media-body" id="usernames"><h2><%#Eval("username")%></h2><small><%#Eval("posteddate")%></small><h5 id="msgids"><%#Eval("id")%></h5></div> </div></div><div class="card-body card-padding"><p><%#Eval("message") %></p><div class="wis-numbers"><span><i class="zmdi zmdi-comments"></i></span></div><div class="wi-stats clearfix"><div></div></div></div><div class="wi-comments"><div class="list-group" id="result2"><div class="list-group-item media"><div class="pull-right"> </div> <div class="media-body" id="welcome"> <a href="#" class="lgi-heading"><small class="c-gray m-l-10"></small></a><small class="lgi-text"><%#Eval("comments")%></small></div></div></div><div class="wic-form" id="commentsform"><textarea class="wp-text auto-size" data-ma-action="wall-comment-open"  id="TextBox1" placeholder="Write Comments..."></textarea><div class="wicf-actions text-right"><button class="btn btn-sm btn-link" data-ma-action="wall-comment-close">Cancel</button><input type="button" onclick="return GetSelectedRow(this);" class="btn" value="Post" id="b' +<%#Eval("id")%>'"/></div></div></div></div></div></div></div>';            
        });

现在克隆div标签我用了

  $(function () {
            $.ajax({
                type: "POST",
                url: "RepeaterAjax.aspx/GetMessages",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });


        function OnSuccess(response) {
            debugger;
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);

            var welcome = xml.find("Table");
            var table = $("#hello div").eq(0).remove();
            welcome.each(function () {
                debugger;
                var welcome = $(this);
                var msgid = $("h5", table).html(welcome.find("id").text());
                $("p", table).html(welcome.find("message").text());
                $("h2", table).html(welcome.find("username").text());
                $("#usernames small", table).html(welcome.find("posteddate").text());
                $("h5", table).html(welcome.find("id").text());
                $("#commentsform input[type=button]", table).html(welcome.find("id").text());              
                $("#hello").prepend(table).prepend("<br/>");
                table = $("#hello div").eq(0).clone(true);                
            });
        }

我的问题是我无法获得与msgid连接的动态生成按钮,这是唯一的。所以点击时我可以区分生成的div ..

1 个答案:

答案 0 :(得分:1)

我建议你给你的按钮一个css类,它对动态输出中的那个特定按钮是唯一的。因为在.each中你只处理输出的一次重复,在该部分中只有一个按钮与该类,你可以保证在不知道具体id的情况下找到它。因此,如果您的按钮现在看起来像这样(我已添加(class="specialButton"):

<input type="button" onclick="return GetSelectedRow(this);" class="btn specialButton" value="Post" id="b' +<%#Eval("id")%>'"/>

然后在javascript中你可以改变

var msgid = $("h5", table).html(welcome.find("id").text());

var msgid = welcome.find(".specialButton").attr("id");
$("h5", table).html(msgid);

N.B。我假设将按钮的ID写入<h5>标签是你的意图。你的原始代码行没有意义,所以如果你的意图不合适,请纠正我。

这将设置变量