Javascript 追加到div并且无法绑定添加的按钮

我有一个php函数，该函数响应带有按钮的表单代码。单击该按钮时，它将附加一个文件字段和另一个按钮，如果单击该按钮，将重复上述操作。但是，单击“添加”按钮时，什么也没有发生

我想这和扣钮有关

代码如下：

$formtoreturn = '
<div class="form_holder">
    <form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >


    <div id="fields_holder">
        <span class="form_holder-label" id="fileC">Select image or images</span> 
        <div class="fields" id="field1">
            <input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
            <a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
        </div>

    </div>
    <div class="clear"></div>

    <input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
    <input type="submit" name="submittestimonial" value="Submit Testimonial">
    </form>
    <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
        var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';

        if($j(this).attr("rel") == "add"){
            $j(this).attr("rel", "ded");
            $j("#fields_holder").append(toappend);
            filecount++;
        }
    });
});

</script>
';
echo $formtoreturn;

希望代码和我的问题都清楚

---

高级版谢谢。

我建议您将JavaScript代码从

$j('#fields_holder').on('click', '.add_file', function() {
     // ...
});

到

然后，事件将出现并在文档的单击处理程序中处理

更新

---

尽管我已经做了一个改进，并且它在两种变体中都很好地工作。

使用php回送如此大的html块不是很干净，您应该研究php模板引擎，如Smarty等。这会帮你省去很多痛苦！第二次，你在点击哪个按钮？请注意，您显然禁用了前面的按钮，并且只允许最后一个按钮添加新字段。SPHP本身是一种模板语言，以后使用另一个按钮应该不会有什么不同。但是谢谢你的帮助Alexander第二次点击按钮时，我指的是添加的第二个按钮-这是一个很大的误导，很抱歉，我会纠正它。@Netmeta，然后，trusted with文档甚至尝试过，但为什么我要将add_flie（正在单击的按钮）更改为fields_holder（包含按钮的div，但未单击）

$j(document).on('click', '#fields_holder .add_file', function() {
     // ...
});