jquery - Fieldset prevents reading values input elements

Question

The following situation works fine (JSP file):

<p class="FormInputElement">
        <label for="description">Description</label>
        <input type="text" class="description" id="description"/><br />
</p>
<button class="Button75" type="submit" id= "editWidget" alt="Edit widget">
        <img src="/tis/img/icons/tick.png">
                Save
</button>

In my Servlet, a .JS file, the description value can be read like this:

$(function() {
    $("#editWidget").click(function(e){
        var description = $(this).parent().find('.description').val();

However, if I put <fieldset> tags around the button, the description is always "". The servlet can't read the value anymore. How is this possible? What changes when using a fieldset?

Thanks in advance!

Answer 1

你原来的标记结构是这样的

• DIV （或任何其他容器）
  • 磷
    • 标签
    • 输入#描述
  • 按钮#editWidget

这里$(this).parent()将转到 DIV，并.find()从那里开始工作，找到预期的元素。

随着<fieldset>，标记结构变为

• 分区
  • 磷
    • 标签
    • 输入#描述
  • 场集
    • 按钮#editWidget

这里$(this).parent()将转到 FIELDSET，.find()但什么也找不到。

解决方法：不要使用.parent()，使用.closest("div")。