javascript - 在 JavaScript 中使用父函数

Question

我正在尝试获取隐藏输入字段的值，但我不断获得 ar 变量的未定义值。有谁看到我做错了什么，因为我被卡住了？

我使用parent 3次来找到正确的div，之后我使用按类名查找。

这是我的 HTML:

<div class="heading"><span>Sanja Bajic</span><i>+</i></div>
<div class="details">
    <input type="hidden" name="id" class="idValue" value="2" /><ul class="form">
        <li>
            <label>Name:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Hours per week:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form">
        <li>
            <label>Username:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Email:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form last">
        <li>
            <label>Status:</label><span class="radio"><label for="inactive">Inactive:</label><input type="radio" value="1" name="status" id="Radio5" /></span><span class="radio"><label for="active">Active:</label><input type="radio" value="2" name="status" id="Radio6" /></span></li>
        <li>
            <label>Role:</label><span class="radio"><label for="admin">Admin:</label><input type="radio" value="1" name="status" id="Radio7" /></span><span class="radio"><label for="worker">Worker:</label><input type="radio" value="2" name="status" id="Radio8" /></span></li>
    </ul>
    <div class="buttons">
        <div class="inner"><a href="javascript:;" class="btn green">Save</a> <a href="javascript:;" onclick="DeleteMember();" class="btn red">Delete</a> <a href="javascript:;" class="btn orange">Reset Password</a></div>
    </div>
</div>

这是我单击删除链接时使用的脚本:

<script type="text/javascript">
        function DeleteMember() {
            var ar = $(this).parent().parent().parent().find('.idValue').val();
            $.ajax({
                type: "POST",
                url: 'team-members.aspx/DeleteTeamMember',
                data: JSON.stringify({ "ID": ar }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: fnsuccesscallback,
                error: fnerrorcallback,
            });
        }
            function fnsuccesscallback(data) {
                console.log(data);
                window.location.reload();
            }
            function fnerrorcallback(result) {
                console.log(result);
                alert(result.statusText);
            }
    </script>

在为 ar 变量赋值时我做错了什么？

Answer 1

 onclick="DeleteMember();"

您没有在对象的上下文中调用 DeleteMember，因此它是在 window 的上下文中调用的。

onclick 函数将在它出现的元素的上下文中调用，您可以显式传递该函数:

 onclick="DeleteMember.call(this);"

<小时/>

不过，最好使用 JavaScript 来绑定(bind)事件处理程序。

删除 onclick 属性并(因为您使用的是 jQuery)使用 on 代替。

$(selector_that_matches_the_element).on('click', DeleteMember);

<小时/>

另请注意，href="javascript:;" 是一个明确的标志，表明您应该使用按钮而不是链接，并且 JavaScript 函数名称的约定是它们应该以小写字母，除非它们是构造函数(即使用new关键字调用)。