jQuery即使启用了jQuery也无法更新PHP生成的元素。

Question

I have the following code, which works fine:

for (var i = 0; i < <?php echo count($set); ?>; i ++){

    $('#inc' + i).on('click', function(){
        $('#scratchbox').val('test');
    });         

}

But what I need is this, which isn't working (the only difference is that '#scratchbox' has changed to '#set' + i):

for (var i = 0; i < <?php echo count($set); ?>; i ++){

    $('#inc' + i).on('click', function(){
        $('#set' + i).val('test');
    });         

}

Both the #inc divs and #set textboxes are generated by PHP in the same place and at the same time (technically, in this order: #set1, #inc1, #set2, #inc2, etc.). Also, further down I have this, which is able to retrieve the values contained in the #set textboxes just fine when the event handler is a static #submit div:

$('#submit').click(function(){

    for (var i = 0; i < <?php echo count($set); ?>; i ++){
        sets[i] = $('#set' + i).val();
    }

}); 

What should I change and why?

Answer 1

Why dont add class names to your elements so you can do something like:

$(document).on('click', '.click_element', function() {
   var ID = $(this).attr('id');
   $('#set' + ID).val('test');
});

and have for loop separate that creates those click elements with the IDs.

Note that this solution is much faster in terms of execution than having to bind click events within a loop.

Answer 2

By the time your click event handler runs, the value if i is set to its maximum value. Create an IIFE in your loop to save the value of i for each iteration of your for loop.

For example:

for (var i = 0; i < <?php echo count($set); ?>; i ++){
    (function (inner_i) {
        $('#inc' + inner_i).on('click', function(){
            $('#set' + inner_i).val('test');
        });         
    })(i);
}

Here's a good read on using an IIFE (Immediately-Invoked-Function-Expression): http://benalman.com/news/2010/11/immediately-invoked-function-expression/