Question

如何获取包含已使用jQuery单击的按钮的HTML组件？单击按钮后，我需要获取与单击按钮对应的邀请对象，并将帖子请求发送到给定链接。

{% if invites %}
    {% for invite in invites %}
        <p>Your invites:</p>
        <div class="row">
            <label style="display: block">Invite from {{ invite.initiator }} to join his conference!</label>
            <button type="button" id="ButtonId">Accept invite</button>
        </div>
    {% endfor %}
{% endif %}

剧本：

<script type="text/javascript">
    $(function() {

        $('#ButtonId').on('click',function(){
            !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : '';
            $('#ButtonId').val('Done');
            var data = {

            };

            $.ajax({
                url: '/api/send_invite/' + /*the username*/,
                data: JSON.stringify(data , null, '\t'),
                contentType: 'application/json;charset=UTF-8',
                type: 'POST',
                success: function() {
                }
            });
        });

    });
</script>

Answer 1

有多种方法可以做到这一点：

将用户名设置为按钮的属性之一。

假设invite.initiator是您要发送的用户名

<button type="button" id="ButtonId" username={{invite.initiator}}>Accept invite</button>

在javascript代码中，您可以使用attr上的this方法轻松访问该元素

url: '/api/send_invite/' + $( this ).attr("username"),

Answer 2

您的＆＃34; HTML组件＆＃34;是什么按钮包裹？如果是这样，为了获得包含被点击按钮的元素（按钮的＆＃34;父＆＃34;），您可以执行以下操作：

$('#myButton').on('click',function(){
    var buttonParent = $(this).parent();
    // do your stuff..
});

获取＆＃34;邀请对象＆＃34;您可以将数据属性附加到accept-invite按钮，此数据属性将包含您将用于获取正确对象的值，例如：

<button type="button" id="inviteAcceptBtn" data-object-id="123">Accept invite</button>

然后你就可以得到＃34; object-id＆＃34;简单的jQuery：

$('#inviteAcceptBtn').on('click',function(){
    var objectId = $(this).data('object-id');
    // do your stuff..
});

可能有一些其他方法，因为有很多技术可以做到这一点。

希望它有所帮助

Answer 3

@ sudomakeinstall2：最好将数据添加为data-attrbute，这样：

<button type="button" id="ButtonId" username={{invite.initiator}}>Accept invite</button>

变为

<button type="button" id="ButtonId" data-username="{{invite.initiator}}">Accept invite</button>

获取按下按钮的HTML组件

3 个答案: