Question

我有以下表格

<form action="" class="ink-form">
    <fieldset class="">
        <div class="control-group required">
            <div class="column-group gutters">
                <label for="name" class="large-15 content-right">Link</label>
                <div class="control large-60 append-button">
                    <span><input name="link" type="text" id="name"></span>
                    <button id="convert" class="ink-button"><i class="icon-search"></i> Convert</button>
                </div> 
            </div>
        </div>
    </fieldset>
    <div class="large-15"></div>
    <div id="alertBox" teste="POP" class="large-50 medium-50 small-100">

    </div>
</form>

使用jquery单击按钮时我会var form = $(this).parentsUntil("form");获取表单。现在我想选择alertBox div来附加一些数据。在较旧的项目中，我有以下功能

function alertMessage(selector, type, message) {

  var typeText;
  if (type == "error")
    typeText = "Erro";
  else if (type == "success")
    typeText = "Sucesso";
  else if (type == "info")
    typeText = "Info";

  selector.append("<div id=\"alert\" class=\"ink-alert basic " + type + "\" style=\"display:none;\"><button class=\"ink-dismiss\">&times;</button><p><b>" + typeText + ":</b> " + message + "</p></div>");
  selector.find('div[id=alert]').show(500);
}

并使用alertMessage($(form).find('div[id=alertBox]'), "success", "O ficheiro foi importado com sucesso!");调用它，但现在它不能用于新项目。我不知道它是否与jQuery新版本或错误相关：s

jsFiddle：http://jsfiddle.net/metRo_/bCQ3y/

Answer 1

尝试将您的Javascript更新为此（看起来JSFiddle本身不喜欢非特定的'表单'选择器）：

$('#convert').click(function(e) {
    e.preventDefault();
    var form = $(this).parentsUntil("form .ink-form");
    alertMessage($(form).find('div[id=alertBox]'), "success", "O ficheiro foi importado com sucesso!");
    alert("teste");
});

Fiddle here

但是，重申其他人所说的话：

HTML中的ID应该是唯一的，否则请使用.selector s
将选择器更改为$('#alertBox')

Answer 2

问题出在这个

var form = $(this).parentsUntil("form");

根据documentation

，它不会为您提供表单元素

描述：获取当前匹配元素集中每个元素的祖先，最多但不包括选择器，DOM节点或jQuery对象匹配的元素。

因此，这会返回此元素<div class="control-group required">，但这不包含alertBox所以您的此选择器

$(form).find('div[id=alertBox]')

找不到任何元素。

将您的paerentsUntil选择器更新为

var form = $(this).parents("form")[0];

然后它将工作或更好地为选择器提供一些id并直接选择

<form id='sample' ...> $('#sample')

检查http://jsfiddle.net/bCQ3y/5/

选择一个div并附加数据

2 个答案: