如何在jQuery中向附加的html字符串添加函数？_Jquery_Function_Append

如何在jQuery中向附加的html字符串添加函数？

jquery function

如何在jQuery中向附加的html字符串添加函数？,jquery,function,append,Jquery,Function,Append,我不熟悉jQuery和Web开发。：-）我想创建一个问题创建页面。它有一个问题文本框和一个添加按钮。当用户按下添加按钮时，将出现一个新的问题文本框，并在下一行显示一个新的添加按钮。但旧的添加按钮将变成删除按钮并更改其功能以下是jQuery代码： $(function () { $(".buttonMinus").hide(); $(".buttonPlus").click(function (event) { $(this).remove(

我不熟悉jQuery和Web开发。：-）

我想创建一个问题创建页面。它有一个问题文本框和一个添加按钮。当用户按下添加按钮时，将出现一个新的问题文本框，并在下一行显示一个新的添加按钮。但旧的添加按钮将变成删除按钮并更改其功能

以下是jQuery代码：

$(function () {
        $(".buttonMinus").hide();

        $(".buttonPlus").click(function (event) {
        $(this).remove(".buttonPlus");
        $(".buttonMinus").show();
        $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>");   **//  Here !!!!**
        alert("Welcome " + $(".ttt").val() + "!");        
    });

    $(".buttonMinus").click(function (event) {
        alert("You have pressed the DELETE button!");
    });

$（函数（）{
$（“.buttonMinus”）.hide（）；
$（“.buttonPlus”）。单击（函数（事件）{
$（此）。删除（“.buttonPlus”）；
$（“.buttonMinus”）.show（）；
$（“#p1”）。附加（问题：”）；***/这里**
警报（“欢迎”+$（“.ttt”）.val（）+“！”；
});
$（“.buttonMinus”）。单击（函数（事件）{
警报（“您已按下删除按钮！”）；
});

}))

下面是html代码：

<body>
<div class="demo">
    <p id="p1">Your name: <input type="text" class="ttt"/>
    <button class="buttonPlus" type="button"></button>
    <button class="buttonMinus" type="button"></button></p>
    <br />
</div>      
</body>


您的姓名：

我把所有的加法按钮和减法按钮分为两个不同的类，“.buttonPlus”和“.buttonMinus”。当主html添加行时，.buttonPlus工作得很好。但是当它被.append（）函数添加时，它无法工作。它只是将.buttonPlus的CSS代码添加到它的按钮中，但是$（“.buttonPlus”）.click（函数（事件）{…}没有附加到新的buttonPlus

你们能告诉我为什么以及如何解决这个问题吗

谢谢，艾希礼

您可能希望使用这样的函数

$(".buttonPlus").live("click",function (event) {
    $(this).remove(".buttonPlus");
    $(".buttonMinus").show();
    $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>");   **//  Here !!!!**
    alert("Welcome " + $(".ttt").val() + "!");
});

$(".buttonMinus").live("click",function (event) {
    alert("You have pressed the DELETE button!");
});

$（“.buttonPlus”）.live（“单击”），函数（事件）{
$（此）。删除（“.buttonPlus”）；
$（“.buttonMinus”）.show（）；
$（“#p1”）。附加（问题：”）；***/这里**
警报（“欢迎”+$（“.ttt”）.val（）+“！”；
});
$（“.buttonMinus”）.live（“单击”），函数（事件）{
警报（“您已按下删除按钮！”）；
});

这样做的目的是将相同的事件处理应用于DOM中尚未添加的元素。

创建单击处理程序时，只有页面上当前的元素连接起来。以后添加的元素不会连接起来

您可以在添加这些元素时重新绑定它们，也可以使用jQuery的

.live（）

将自动为您执行此操作的功能。

欢迎使用jQuery！这是一个常见问题。此问题是由于新的

.buttonlus

元素在首次将

单击事件绑定到.buttonlus
时不存在。第一次绑定单击事件时，它将将只绑定到页面上已经存在的元素。这就是为什么将所有代码包装在$（function（））
中的全部原因——它确保在创建所有DOM元素之前不会运行
有几种不同的解决方案。最简单的解决方案是使用jQuery的.live（）
方法，正如Ryan所建议的那样。这将自动将指定的单击
事件绑定到创建的任何新.buttonPlus
元素
然而，虽然这是最简单的解决方案，但计算成本也非常高。我在这里不详细介绍，但使用.live（）
绝不是最好的选择。有一种类似的jQuery方法称为.delegate（）
，可以使用它来代替。然而，.delegate（）
比.live（）
便宜，但它仍然不是您的最佳解决方案
正如迪奥德乌斯所提到的，最好的解决方案是“在添加这些元素时重新绑定它们。”您可以通过以下方式实现：
function btnClickEvent(btn){
    btn.remove(".buttonPlus");
    $(".buttonMinus").show();
    $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>");
    alert("Welcome " + $(".ttt").val() + "!");

    //Re-binding
    var newBtn = $("#p1").find('.buttonPlus:last');
    newBtn.click(function(){
        btnClickEvent(newBtn);
    });
}

$(function(){
    $(".buttonMinus").hide();

    $(".buttonPlus").click(function(){
        btnClickEvent($(this));
    });

    $(".buttonMinus").click(function (event) {
        alert("You have pressed the DELETE button!");
    });
}

功能btnClickEvent（btn）{
删除（“.buttonPlus”）；
$（“.buttonMinus”）.show（）；
$（“#p1”）。追加（问题：”；
警报（“欢迎”+$（“.ttt”）.val（）+“！”；
//重新绑定
var newBtn=$（“#p1”）.find（'.buttonPlus:last'）；
newBtn.单击（函数（）{
btnClickEvent（newBtn）；
});
}
$（函数（）{
$（“.buttonMinus”）.hide（）；
$（“.buttonPlus”）。单击（函数（）{
btnClickEvent（$（本））；
});
$（“.buttonMinus”）。单击（函数（事件）{
警报（“您已按下删除按钮！”）；
});
}

正如您所看到的，我们所做的只是将运行在点击事件上的代码放入一个单独的函数中。这使我们可以轻松地将其绑定到新按钮。您可能也希望对减号按钮执行类似的操作。
回答得很好！给我一个jQuery的大图！谢谢！一旦您开始使用AJAX thi这类事情可能变得特别重要。