JQuery - 单击(fn)不适用于动态添加按钮

Question

以前,我使用的代码正在运行.但今天,当我重新使用代码时,它根本不起作用.

代码/案例情况:我预先定义了一个html代码,它在现有的默认表单之后插入一个新表单.我正在尝试使用jQuery将click函数添加到新表单中的一个按钮.jQuery代码是

$("button[value='ADDTSG']").click(function(){
    var NEW = "<div class='w175 mR9 mB9 p9 rCor cWhi' id='fL'><form action='pro/lab_handle.php' method='post'><input type='hidden' value='0' name='LID'/><div class='w65 B ttU mR9' id='fL'>TPC</div><input type='text' class='w65 Dg4' name='QTPC'/><br/><hr/><button value='NEWTSG' name='BTN' type='submit'><img src='img/add.png'/></button><button id='fR' type='button' value='XTSG'><img src='img/del.png'/></button></form></div>";

    $(".FORCLONE").after(NEW);
    $("button[value='ADDTSG']").hide();
    $("button[value='SAVETSG']").hide();
});

// buttons below not alerting at all, no function after click on it
$("button[value='XTSG']").click(function(){
    alert("close tsg"); return false;
});
$("button[value='NEWTSG']").click(function(){
    alert("new tsg"); return false;
});

默认表单的html是

<div id='fL' class='FORCLONE'>
<div id='fL' class='w175 bgBlu1 mR9 mB9 p9 rCor cWhi'>
    <form method='post' action='pro/lab_handle.php'>
        <input type='hidden' name='LID' value='1'>
        <div id='fL' class='w65 B ttU mR9'>TPC</div><input type='text' name='MTPC' class='w65 Dg4' value='555'>
        <button type='submit' name='BTN' value='SAVETSG'><img src='img/ok.png'></button>
        <button id='fR' type='button' value='ADDTSG'><img src='img/add.png'></button>
    </form>
</div>
</div>

谁能告诉我为什么这不起作用？顺便说一下,我正在使用FireFox和web-developer插件,即使点击"XTSG"/"NEWTSG"按钮也没有显示javascript错误.

Answer 1

使用.live()(对于较旧的jquery版本 - <v1.7):

$('#btnALERT1').live('click', function()
{
   alert("Hello");
});

要么:

$(document).delegate('#btnALERT1', 'click', function() 
{
   alert("Hello");
});

使用.on()(对于新的jquery版本 - > = 1.7):

$(document).on('click', '#btnALERT1', function()
{
   alert("Hello");
});

来源.