Question

我制作了一个非常简单的按钮点击事件处理程序，我希望在点击按钮后添加<p>元素，您可以检查my code here：

<div id="wrapper">
    <input id="search_btn" value="Search" type="button">
</div>

$("#search_btn").click(function(){
    $("#wrapper").append("<p id='other'>I am here</p>");
});

我有两个问题要问：

1，为什么我的.append()无法按预期工作（这会附加<p>元素）

jQuery中的

2。，如何检查是否已经附加了一些元素？例如，如何检查我的案例中是否已附加<p id="other">？

-------------------- update ----------------------- --------------------

请检查my updated code here。

所以，只有第二个问题仍然存在......

Answer 1

您使用的是mootools而不是jQuery。
检查您的元素是否存在

if($('#other').length > 0)

因此，如果您不想将元素追加两次：

$("#search_btn").click(function() {
    if($('#other').length == 0) {
        $("#wrapper").append("<p id='other'>I am here</p>");
    }
});

或者，您可以使用.one(function) [doc]：

$("#search_btn").one('click', function() {
    $("#wrapper").append("<p id='other'>I am here</p>");
});

Answer 2

1）默认情况下，jsFiddle在MooTools中加载，你需要包含jQuery才能工作。世界上没有理由为什么这个例子不起作用。（假设$实际上映射到jQuery对象，那就是。）

2）您可以查看nextSibling的{{1}}，或使用DOMElement jQuery方法，如下所示：

next()

Answer 3

http://jsfiddle.net/j36ye/17/

$("#search_btn").click(function(){
    if(($('#other').length) == 0) {
        $("#wrapper").append("<p id='other'>I am here</p>");
    }
    return false
});

或

var other_appended = false;

$("#search_btn").click(function(){
    if(other_appended == false) {
         $("#wrapper").append("<p id='other'>I am here</p>");
          other_appended = true;
    }
    return false;
});

Answer 4

如何检查元素是否存在：

if($("p#other").length > 0) {
    // a p element with id "other" exists
}
else {
    // a p element with id "other" does not exist
}

Answer 5

你的小提琴正在使用moo工具框架。将其更改为使用左侧的jquery框架，它可以正常工作。见http://jsfiddle.net/KxGsj/

Answer 6

检查元素是否已经附加：

alert($(this).parent().length?'appended':'not appended');

关于jQuery append（）以及如何检查元素是否已被追加

6 个答案: