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;
        }
    });
});

警报（）没有被解雇。

错误在哪里？

修改

这是我的答案之后的代码：

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

我正在使用Jquery 1.7.2。 Firebug没有显示错误。没有警告（）被触发。

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

Answer 1

当使用on时，事件应该从元素的一个静态父项委派，div #preview_upload是动态生成的，所以你应该选择另一个元素，如body或document委托事件的对象，试试这个：

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

Answer 2

将此代码包装在文档ready事件中并且工作正常

$(function(){

   $('#preview_upload div p').on("click", "span", function(){
       alert("working")   
      //your code

   });

});

工作样本：http://jsfiddle.net/HBunv/

如果这不起作用，请检查页面中的其他脚本错误。 Firebug控制台将有助于找出脚本错误

Answer 3

我认为您要么拥有过时的jQuery版本（低于1.7），要么在将内容加载到DOM之前运行代码，这意味着您需要$(document).ready(function()。

您的代码在下面的示例中工作正常，并且警报正在触发！

请检查工作jsFiddle example。

点击事件的jQuery .on（）函数

3 个答案: