追加到div和无法绑定添加的按钮

Question

我有一个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; 

希望的代码，我的问题是清楚的。

谢谢先进。

Answer 1

我建议你从

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

改变你的JavaScript代码来

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

则该项目的冒泡，并在document的点击处理程序处理。

UPDATE

虽然我做了一个test和它的工作很好，我在这两个变种。