Question

Previously, the code I was using was working. But today, when I re-used the code, it is not working at all.

Code/Case situation:
I pre-defined an html code which inserts a new form after an existing default form. I am trying to use jQuery to add a click function to one of the buttons in the new form.The jQuery code is

$("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;
});

The html for the default form is

<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>

Can anyone tell me why this is not working? By the way, I am using FireFox with web-developer plug-in, and there is no javascript error shown even i click on the “XTSG” / “NEWTSG” buttons.

Answer 1

Use .live() (for older jquery versions – < v1.7):

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

Or:

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

Use .on() (for new jquery versions – >= 1.7):

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

Source.