点击事件上的 jQuery .on() 函数

Question

我有一些由 jQuery 插入的 DIV。结构是这样的:

<div class="preview_images" id="preview_upload">
     <div class="image_box" id="img_box8793">
         <p>
            <img class="count_19" src="[...]">
            <br>
             <span class="del_img">löschen</span>
         </p>
     </div>
</div>

在使用 live() 之前，我想使用 on() 函数。这是我的 jQuery 函数:

$('#preview_upload div p').on("click", "span", function () {
    alert('###');
    parent_div_id = $(this).parent().parent('div').attr('id');
    $(this).parent().parent('div').fadeOut('slow');
    $('#final_img_prev #' + parent_div_id).remove();
    del_val = $(this).attr('title');
    $('#customfields-tf-150-tf,#customfields-tf-16-tf, #customfields-tf-17-tf, #customfields-tf-18-tf, #customfields-tf-19-tf').each(function () {
        if ($(this).val() == del_val) {
            $(this).val('');
            var img_count = jQuery.cookie('img_count');
            new_img_count = parseInt(img_count) - 1;
            if (new_img_count > 0) {
                jQuery.cookie('img_count', '', {
                    expires: -1
                });
                jQuery.cookie('img_count', new_img_count, {
                    expires: 1
                });
                if (new_img_count < 4) {
                    new_file = '<input type="file" id="file1" name="file1">';
                    $('#uploadForm .file_box').html('');
                    $('#uploadForm .file_box').html(new_file);
                    $('#uploadForm').fadeIn();
                }
            }
            return false;
        }
    });
});

alert() 没有被触发。

哪里出错了？

编辑:

这是您回答后我的代码:

jQuery(function($){
   $(document).ready(function() {
      $('#preview_upload div p').on("click", "span", function(){
            alert('###');
      });
   });
)};

我使用的是 Jquery 1.7.2。 Firebug 显示没有错误。没有触发alert()。

也许是这样，因为 DIV 及其内容是动态创建的？

Answer 1

当使用 on 时，事件应该从元素的静态父元素之一委托(delegate)，div #preview_upload 是动态生成的，因此您应该选择另一个元素，例如用于委托(delegate)事件的 body 或 document 对象，请尝试以下操作:

$(document).on("click", "#preview_upload span", function(){
   // ..
})