使用动态表单的click事件设置JavaScript变量

I have some PHP which outputs JavaScript. I need to set the id dynamically. The following code breaks on the 3rd line because of the use of the i variable. This I expect to be a simple problem with the quotation marks but I could be wrong.

$html .='$("#add").click(function (e) {';

    $html .= 'var i=0;';

    //Append a new row of code to the "#items" div
    $html .='$("#items").append(\'<div><input name=\"input[]\" type=\"text\" id=\"itin_form_'+i+'\" /><button class=\"delete\">Delete</button></div>\'); i++; });';

Can anyone see why this code fails?

Does this work?

$html .= 'var i=0;';
$html .='$("#add").click(function (e) {';
 //Append a new row of code to the "#items" div
$html .='$("#items").append(\'<div><input name="input[]" type="text" id="itin_form_\'+i+\'" /><button class="delete">Delete</button></div>\'); i++; });';

When escaped to Javascript it should return:

var i=0;
$("#add").click(function (e) {
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>'); 
    i++; 
});

The problem here is, whenever you click, the value of i gets initialized to 0. It is indeed a simple silly mistake. Your code gives you this result:

$("#add").click(function (e) {
    var i=0;
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>'); 
    i++; 
});

But it supposed to have something like this:

var i = 0;
$("#add").click(function (e) {
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>'); 
    i++; 
});

See the placement of var i = 0; above. So your code should be:

$html .= 'var i=0;';
$html .='$("#add").click(function (e) {';
 //Append a new row of code to the "#items" div
$html .='$("#items").append(\'<div><input name="input[]" type="text\\" id=\"itin_form_\'+i+\'" /><button class="delete">Delete</button></div>\'); i++; });';

You don't need to escape " in the above code. :)

There's many issues with your code to begin with:

Variable var i=0 is declared inside the function so it's always getting reset and never going to increase over 1.

Solution: you have to declare it only once at the page load, e.g. in a script tag in your <head> section or inside a jquery document ready call. I showed an example below.

Please get rid of all these escape characters by using PHP nowdoc:

Here's an example test.php tested and working I created myself using your javascript code as-is (I just removed all the escape characters to make it more readable):

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div id="items"></div>
<input type="button" id="add" value="Add" />

<?php

$str =
<<<'EOT'
<script>
/* Start of Nowdoc
   you can paste javascript code in here as-is!
*/
var i=0; // notice how I declared this outside of add.click
$("#add").click(function (e) {
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>');
    i++;
}
);
/* End of Nowdoc */
</script>
EOT;


echo $str;

?>

Output:

enter image description here

Maybe you're just forgetting to include the jquery library.

Add this to your <head> section:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>